UNPKG

electron-devtools-vendor

Version:

<div align="center"> <h2>electron-devtools-vendor</h2> <img alt="MIT" src="https://img.shields.io/github/license/BlackHole1/electron-devtools-vendor?color=9cf&style=flat-square"> <img alt="GitHub repo size" src="https://img.shields.io/github/r

1,811 lines (1,685 loc) 38 kB
.flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; background: #fff; -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08); box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08); } .flatpickr-calendar.open, .flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible; } .flatpickr-calendar.open { display: inline-block; z-index: 99999; } .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } .flatpickr-calendar.static { position: absolute; top: calc(100% + 2px); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { -webkit-box-shadow: none !important; box-shadow: none !important; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; left: 22px; } .flatpickr-calendar.rightMost:before, .flatpickr-calendar.rightMost:after { left: auto; right: 22px; } .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; } .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; } .flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6; } .flatpickr-calendar.arrowBottom:after { border-top-color: #fff; } .flatpickr-calendar:focus { outline: 0; } .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-months .flatpickr-month { background: transparent; color: rgba(0,0,0,0.9); fill: rgba(0,0,0,0.9); height: 28px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; top: 0px; line-height: 16px; height: 28px; padding: 10px; z-index: 3; color: rgba(0,0,0,0.9); fill: rgba(0,0,0,0.9); } .flatpickr-months .flatpickr-prev-month.disabled, .flatpickr-months .flatpickr-next-month.disabled { display: none; } .flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i { position: relative; } .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ /* */ left: 0; /* /*rtl:end:ignore*/ /* */ } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ /* */ right: 0; /* /*rtl:end:ignore*/ /* */ } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: #959ea9; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; } .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { -webkit-transition: fill 0.1s; transition: fill 0.1s; fill: inherit; } .numInputWrapper { position: relative; height: auto; } .numInputWrapper input, .numInputWrapper span { display: inline-block; } .numInputWrapper input { width: 100%; } .numInputWrapper input::-ms-clear { display: none; } .numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(57,57,57,0.15); -webkit-box-sizing: border-box; box-sizing: border-box; } .numInputWrapper span:hover { background: rgba(0,0,0,0.1); } .numInputWrapper span:active { background: rgba(0,0,0,0.2); } .numInputWrapper span:after { display: block; content: ""; position: absolute; } .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(57,57,57,0.6); top: 26%; } .numInputWrapper span.arrowDown { top: 50%; } .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(57,57,57,0.6); top: 40%; } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { fill: rgba(0,0,0,0.5); } .numInputWrapper:hover { background: rgba(0,0,0,0.05); } .numInputWrapper:hover span { opacity: 1; } .flatpickr-current-month { font-size: 135%; line-height: inherit; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 6.16px 0 0 0; line-height: 1; height: 28px; display: inline-block; text-align: center; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; } .flatpickr-current-month span.cur-month:hover { background: rgba(0,0,0,0.05); } .flatpickr-current-month .numInputWrapper { width: 6ch; width: 7ch\0; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0,0,0,0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0,0,0,0.9); } .flatpickr-current-month input.cur-year { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0,0,0,0.5); background: transparent; pointer-events: none; } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 28px; } .flatpickr-weekdays .flatpickr-weekdaycontainer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } span.flatpickr-weekday { cursor: default; font-size: 90%; background: transparent; color: rgba(0,0,0,0.54); line-height: 1; margin: 0; text-align: center; display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bolder; } .dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; } .flatpickr-days { position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 307.875px; } .flatpickr-days:focus { outline: 0; } .dayContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); opacity: 1; } .dayContainer + .dayContainer { -webkit-box-shadow: -1px 0 0 #e6e6e6; box-shadow: -1px 0 0 #e6e6e6; } .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #393939; cursor: pointer; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 0; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #e6e6e6; border-color: #e6e6e6; } .flatpickr-day.today { border-color: #959ea9; } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #959ea9; background: #959ea9; color: #fff; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #569ff7; -webkit-box-shadow: none; box-shadow: none; color: #fff; border-color: #569ff7; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 #569ff7; box-shadow: -10px 0 0 #569ff7; } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } .flatpickr-day.inRange { border-radius: 0; -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57,57,57,0.3); background: transparent; border-color: transparent; cursor: default; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { cursor: not-allowed; color: rgba(57,57,57,0.1); } .flatpickr-day.week.selected { border-radius: 0; -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; } .flatpickr-day.hidden { visibility: hidden; } .rangeMode .flatpickr-day { margin-top: 1px; } .flatpickr-weekwrapper { display: inline-block; float: left; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 0 12px; -webkit-box-shadow: 1px 0 0 #e6e6e6; box-shadow: 1px 0 0 #e6e6e6; } .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 28px; } .flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(57,57,57,0.3); background: transparent; cursor: default; border: none; } .flatpickr-innerContainer { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .flatpickr-rContainer { display: inline-block; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time { text-align: center; outline: 0; display: block; height: 0; line-height: 40px; max-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-time:after { content: ""; display: table; clear: both; } .flatpickr-time .numInputWrapper { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 40%; height: 40px; float: left; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #393939; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #393939; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { background: transparent; -webkit-box-shadow: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #393939; font-size: 14px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time input.flatpickr-hour { font-weight: bold; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 400; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { height: inherit; display: inline-block; float: left; line-height: inherit; color: #393939; font-weight: bold; width: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #f3f3f3; } .flatpickr-input[readonly] { cursor: pointer; } @-webkit-keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /**! Visualization Classes for debugging the vertical-collection */ .vertical-collection-visual-debugger { height: 100%; position: fixed; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; justify-content: left; background: rgba(50, 50, 50, 1); width: 125px; } .vertical-collection-visual-debugger .vc_visualization-container { transform: scale(0.25); left: 0; position: relative; } .vertical-collection-visual-debugger .vc_visualization-screen { position: absolute; background: transparent; box-sizing: content-box; border-top: 2px dashed yellow; border-bottom: 2px dashed yellow; width: 500px; } .vertical-collection-visual-debugger .vc_visualization-scroll-container { position: absolute; width: 500px; background: rgba(100, 230, 100, 0.65); } .vertical-collection-visual-debugger .vc_visualization-item-container { position: absolute; width: 500px; background: rgba(255, 255, 255, .15); } .vertical-collection-visual-debugger .vc_visualization-virtual-component { box-sizing: border-box; background: rgba(230, 100, 230, 0.6); border: 1px dotted #bbb; border-top: 0px; color: #fff; text-align: center; font-size: 2.5em; width: 250px; } .vertical-collection-visual-debugger .vc_visualization-virtual-component:first-of-type { border-top: 1px dotted #bbb; } .vertical-collection-visual-debugger .vc_visualization-virtual-component.culled { background: transparent; } .basicContext,.basicContext *{box-sizing:border-box}.basicContextContainer{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;-webkit-tap-highlight-color:transparent}.basicContext{position:absolute;opacity:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.basicContext__item{cursor:pointer}.basicContext__item--separator{float:left;width:100%;height:1px;cursor:default}.basicContext__item--disabled{cursor:default}.basicContext__data{min-width:140px;padding-right:20px;text-align:left;white-space:nowrap}.basicContext__icon{display:inline-block}.basicContext--scrollable{height:100%;-webkit-overflow-scrolling:touch;overflow-y:auto}.basicContext--scrollable .basicContext__data{min-width:160px} .basicContext{padding:6px;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 1px rgba(0,0,0,.2);border-radius:3px}.basicContext__item{margin-bottom:2px}.basicContext__item--separator{margin:4px 0;background-color:rgba(0,0,0,.1)}.basicContext__item--disabled{opacity:.5}.basicContext__item:last-child{margin-bottom:0}.basicContext__data{padding:6px 8px;color:#333;border-radius:2px}.basicContext__item:not(.basicContext__item--disabled):hover .basicContext__data{color:#fff;background-color:#4393e6}.basicContext__item:not(.basicContext__item--disabled):active .basicContext__data{background-color:#1d79d9}.basicContext__icon{margin-right:10px;width:12px;text-align:center} .occluded-content { display: block; position: relative; width: 100%; /* prevents margin overflow on item container */ min-height: 0.01px; /* hides text visually while still being readable by screen readers */ color: rgba(0,0,0,0); } table .occluded-content, tbody .occluded-content, thead .occluded-content, tfoot .occluded-content, { display: table-row; position: relative; width: 100%; } ul .occluded-content, ol .occluded-content { display: list-item; position: relative; width: 100%; list-style-type: none; height: 0; } .occluded-content { display: block; position: relative; width: 100%; /* prevents margin overflow on item container */ min-height: 0.01px; /* hides text visually while still being readable by screen readers */ color: rgba(0,0,0,0); } table .occluded-content, tbody .occluded-content, thead .occluded-content, tfoot .occluded-content, { display: table-row; position: relative; width: 100%; } ul .occluded-content, ol .occluded-content { display: list-item; position: relative; width: 100%; list-style-type: none; height: 0; } .ember-table { position: relative; overflow: auto; max-height: 100%; max-width: 100%; box-sizing: border-box; } .ember-table table { border-spacing: 0; table-layout: fixed; box-sizing: border-box; } .ember-table td, .ember-table th { box-sizing: border-box; } .ember-table td.is-fixed-left, .ember-table td.is-fixed-right, .ember-table th.is-fixed-left, .ember-table th.is-fixed-right { position: -webkit-sticky; position: sticky; left: 0; } .ember-table th { z-index: 2; } .ember-table th:not(.is-fixed-right) .et-header-resize-area { right: 0; } .ember-table th.is-fixed-right .et-header-resize-area { left: 0; } .ember-table td.is-fixed-left, .ember-table td.is-fixed-right { z-index: 3; } .ember-table th.is-fixed-left, .ember-table th.is-fixed-right { z-index: 4; } .ember-table th.is-sortable { cursor: pointer; } .ember-table thead { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; box-sizing: border-box; } .ember-table tbody { box-sizing: border-box; } .ember-table tfoot { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2; box-sizing: border-box; } .ember-table.et-unselectable { user-select: none; } .ember-table .et-header-resize-area { cursor: col-resize; width: 10px; height: 100%; position: absolute; top: 0; } .ember-table .et-speech-only { display: none !important; } @media speech { .ember-table .et-speech-only { display: block !important; } } @charset "UTF-8"; .disclosure-triangle { -moz-appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: pointer; display: inline-block; padding: 0 2px; } .disclosure-triangle:focus { outline: none; } .disclosure-triangle svg { transition-duration: 0.1s; transition-property: transform; } .disclosure-triangle.collapsed svg { transform: rotate(-90deg); } /** DRAG-HANDLE =========== The drag handle used for resizing elements */ .drag-handle { bottom: 0; cursor: col-resize; position: absolute; top: 0; width: 6px; z-index: 500; } .drag-handle--right { margin-right: -3px; } .drag-handle--left { margin-left: -3px; } .drag-handle__border { border-left: 1px solid var(--base06); height: 100%; margin-left: 3px; pointer-events: none; width: 1px; } .drag-handle--faded { opacity: 0.3; } .empty-message { align-items: center; color: var(--base11); display: flex; flex-direction: column; font-size: 18px; height: 100%; justify-content: center; text-align: center; } .empty-message svg path { fill: var(--base06); } .empty-message__content { max-width: 40rem; margin: 0 3rem; padding-top: 1rem; } /** ERROR-PAGE =========== An error with possible reaons and solutions. For example when application is not detected. */ .error-page { background: var(--base02); -moz-box-sizing: border-box; box-sizing: border-box; color: var(--base13); display: flex; font-size: 13px; left: 0; min-height: 100%; padding: 10px; position: absolute; top: 0; width: 100%; } .error-page__content { background: var(--base00); border: 1px solid var(--base04); border-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box; margin: auto; padding: 0 25px 25px 25px; position: relative; width: 530px; } .error-page__content a { color: var(--spec01); text-decoration: none; } .error-page__header { align-items: center; border-bottom: 1px solid var(--base04); display: flex; font-size: 19px; font-weight: bold; overflow: hidden; position: relative; top: -25px; } .error-page__header .tomster { flex-shrink: 0; height: 89px; width: 128px; transform: translateY(90px); transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .error-page__header .tomster.hello { transform: translateY(0px); } .error-page__title { flex-grow: 1; padding-top: 25px; } .error-page__body { border-bottom: 1px solid var(--base04); padding-bottom: 10px; } .error-page__body-title { font-weight: bold; } .error-page__body ul { list-style-type: disc; padding-left: 16px; } .error-page__body li { padding: 2px 0; } .error-page__footer { padding-top: 10px; } .list { background: var(--base00); box-sizing: border-box; font-size: 11px; height: 100%; overflow: hidden; position: relative; } .list__content { overflow: hidden; overflow-y: scroll; transform: translateZ(0); } .list table { border-collapse: separate; border-spacing: 0; left: 0; position: absolute; table-layout: fixed; top: 0; width: 100%; } .list__header { border-bottom: 1px solid var(--base05); height: 30px; overflow: hidden; overflow-y: scroll; position: relative; text-align: left; user-select: none; } .list__header .list__row { background: var(--base00); } .list__header .list__cell { color: var(--inherit); font-weight: normal; opacity: 1; padding: 0; padding-left: 5px; position: relative; } .list:not(.list_no-alternate-color) .list__content .list__row { background: var(--base02); } .list:not(.list_no-alternate-color) .list__content .list__row.striped { background: var(--base00); } .list__cell-content { width: 100%; } .list__cell { box-sizing: border-box; line-height: 30px; min-height: 30px; opacity: 0.7; overflow: hidden; padding-left: 5px; text-overflow: ellipsis; white-space: nowrap; } .list__cell_size_small { flex: none; width: 50px; } .list__cell_size_medium { flex: none; width: 130px; } .list__cell_size_larger { flex: none; width: 350px; } .list__cell_size_large { flex: none; width: 250px; } .list__cell_size_huge { flex: none; width: 450px; } .list__cell_value_numeric { font-family: var(--font-monospace); min-width: 65px; padding-right: 10px; text-align: right; } .list__cell_main { font-weight: bold; } .list__cell_spacer { border: none; flex: none; width: 0; } .list__cell_clickable { cursor: pointer; } /** * Content in a cell that should not take the entire * space. Usually because it has a $E after it. */ .list__cell-partial { display: inline-block; float: left; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list__cell-partial_clickable { cursor: pointer; } .list__cell-partial_size_medium { max-width: calc(100% - 60px); } /** * For example a $E icon to the right * of a cell. */ .list__cell-helper { float: right; margin-right: 5px; } .list__link { cursor: pointer; } .list__row:hover .list__cell { opacity: 1; } .list__row:hover .list__cell_clickable { text-decoration: underline; } .list__row:hover .list__cell-partial_clickable { text-decoration: underline; } .list__row:hover .list__link { text-decoration: underline; } .list__row_highlight .list__cell, .list__cell_highlight { opacity: 1; } /* ARROW FOR COLLAPSING AND EXPANDING */ .list__cell-arrow { cursor: pointer; display: block; float: left; height: 30px; position: relative; width: 15px; } .list__cell-arrow:before { color: var(--base10); font-size: 75%; position: absolute; right: 5px; top: 0; } /* cell expanding/collapsing */ .list__cell_arrow_expanded, .list__cell_arrow_collapsed { cursor: pointer; } .list__cell_arrow_collapsed .list__cell-arrow:before { content: "▶"; } .list__cell_arrow_expanded .list__cell-arrow:before { content: "▼"; } .list__row_arrow_collapsed, .list__row_arrow_expanded { cursor: pointer; position: relative; } .list__row_arrow_collapsed .list__cell-arrow:before { content: "▶"; } .list__row_arrow_expanded .list__cell-arrow:before { content: "▼"; } .nav__title { color: var(--base09); cursor: default; font-size: 12px; height: 22px; line-height: 22px; margin: 2px 0 0; overflow: hidden; padding: 0 5px; text-overflow: ellipsis; white-space: nowrap; } .nav ul { list-style-type: none; margin: 0; padding: 0; user-select: none; } /** Nav Item =========== Anchor tag */ .nav__item { align-items: center; color: var(--base12); cursor: default; display: flex; height: 24px; line-height: 24px; overflow: hidden; padding: 0 5px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .nav__item:focus { outline: none; } .app.is-dragging .nav__item { cursor: col-resize; } .nav__item.active { background: var(--focus); color: var(--focus-text); } .app.inactive .nav__item.active { background: var(--base06); } /** Nav Item Label =========== Main text of Nav Item */ .nav__item-label { flex-grow: 1; font-size: 13px; } .nav__item-icon { flex-shrink: 0; height: 22px; margin-right: 7px; width: 22px; } .nav__icon-stroke { fill: var(--base15); } .nav__item.active .nav__icon-stroke { fill: var(--focus-text); } /* Custom navs */ .nav--main .nav__item { height: 38px; line-height: 38px; padding-left: 12px; } .nav--main .pill { margin-right: 5px; margin-left: 5px; } .nav.nav--main .nav__title { padding-left: 14px; } /* Flip path on Promises icon */ .promises-icon-circle { transform: scaleX(-1); transform-origin: 18px; } .pill { background: var(--pill-bg); border-radius: 8px; cursor: inherit; display: inline-block; font-family: var(--font-monospace); font-size: 12px; line-height: 12px; margin: 0 2px; padding: 2px 6px; position: relative; vertical-align: middle; } .active > .pill { background: var(--pill-bg-active); } .pill--small { font-size: 10px; padding: 2px 4px; } .pill--text { font-family: var(--font-sans-serif); } .pill--bold { font-weight: bold; } .pill--blue { background: var(--focus); color: var(--focus-text); } .send-to-console { background: none; border: none; border-bottom: 1px solid transparent; color: var(--base15); cursor: pointer; margin: 0; outline: none; padding: 0; } .send-to-console svg { vertical-align: middle; } .send-to-console .send-chevron { fill: var(--focus); } .send-to-console .send-text { fill: var(--base12); } .send-to-console:hover { border-bottom-color: var(--focus); } .send-to-console:active { transform: translateY(1px); } .send-to-console--chevron-only svg { position: relative; top: -1px; } .sidebar-toggle { margin-right: 0; max-height: var(--toolbar-height); padding-right: 6px; /* Absolute positioning used because this button is not a child of .toolbar */ position: absolute; right: 0; top: 0; } .sidebar-toggle.flip .sidebar-toggle-triangle { transform: rotate(180deg) translateX(3px); transform-origin: center; } /** SPLIT ===== Vertically split panels */ /* .split: The container for one or more panels */ .split { bottom: 0; display: flex; flex: auto; flex-direction: row; left: 0; position: absolute; right: 0; top: 0; } /* .split__panel: Contains a body, and optional header and footer elements */ .split__panel { display: flex; flex: auto; flex-direction: column; position: relative; } .split__panel__hd, .split__panel__bd, .split__panel__ft { position: relative; } .split__panel__hd, .split__panel__ft { border-color: var(--base03); box-sizing: border-box; display: flex; flex: none; flex-direction: column; } .split__panel__hd { background: var(--base00); border-bottom-style: solid; border-bottom-width: 1px; min-height: 29px; } .split__panel__bd { background: var(--base00); flex: auto; overflow: auto; } .split__panel__ft { background: var(--base01); border-top-style: solid; border-top-width: 1px; height: 23px; justify-content: center; } .split__panel, .split__panel__bd { height: 100%; } /* Custom panels */ .split__panel--sidebar-1 .split__panel__bd { background: var(--base01); } .split__panel--sidebar-1 > .split__panel__ft { text-align: center; } .split__panel--sidebar-2 .split__panel__bd { background: var(--base01); } /* Fix main list-view scrolling */ .split--main > .split__panel > .split__panel__bd { overflow-y: hidden; } .split--main > .split__panel--sidebar-1 > .split__panel__bd { overflow-y: auto; } :root { --toolbar-height: 28px; } .toolbar { align-items: center; display: flex; flex-direction: row; min-height: var(--toolbar-height); } .toolbar > * { flex: none; } .toolbar .send-to-console { margin-left: 5px; margin-right: 5px; } .toolbar__checkbox { height: 100%; margin-left: 4px; margin-right: 4px; overflow: hidden; white-space: nowrap; } .toolbar__checkbox label { display: block; height: 100%; line-height: var(--toolbar-height); } .toolbar__checkbox input { margin: 0; } /* if first item in toolbar, create extra clickable space */ .toolbar__checkbox:first-child { margin-left: 0; } .toolbar__checkbox:first-child label { margin-left: 0; padding-left: 8px; } .toolbar .divider { background-color: var(--base05); display: inline-block; height: calc(var(--toolbar-height) - 10px); margin-left: 4px; margin-right: 4px; position: relative; width: 1px; } .toolbar__icon-button { align-items: center; background: transparent; border: 0 transparent none; display: flex; height: var(--toolbar-height); margin-left: 2px; margin-right: 2px; padding: 0 2px; vertical-align: top; /* if first item in toolbar, create extra clickable space on left side */ } .toolbar__icon-button:first-child { margin-left: 0; padding-left: 10px; } .toolbar__icon-button:focus { outline: none; } .toolbar__icon-button:active { transform: translate(1px, 1px); } /* SVG colors */ .toolbar__icon-button .svg-stroke { stroke: var(--base11); } .toolbar__icon-button .svg-fill { fill: var(--base11); } .toolbar__icon-button:hover .svg-stroke { stroke: var(--base13); } .toolbar__icon-button:hover .svg-fill { fill: var(--base13); } /* Modifier: .active (highlighted) */ .toolbar__icon-button.active .svg-stroke { stroke: var(--focus); } .toolbar__icon-button.active .svg-fill { fill: var(--focus); } /* Modifier .disabled */ .toolbar__icon-button.disabled { pointer-events: none; } .toolbar__icon-button.disabled:active { transform: none; } .toolbar__icon-button.disabled .svg-stroke { stroke: var(--base05); } .toolbar__icon-button.disabled .svg-fill { fill: var(--base05); } .toolbar__radio { background: var(--base02); border: none; border-radius: 2px; color: var(--base14); cursor: default; display: inline-block; font-size: 12px; line-height: 18px; margin-left: 2px; margin-right: 2px; padding: 0 6px; position: relative; vertical-align: middle; } .toolbar__radio:active, .toolbar__radio:hover, .toolbar__radio:focus, .toolbar__radio.active { outline: none; } .toolbar__radio--first { margin-left: 4px; } .toolbar__radio--last { margin-right: 4px; } .toolbar__radio:hover { background: var(--base04); } .toolbar__radio:active { background: var(--base00); } .toolbar__radio.active { background: var(--focus); color: var(--focus-text); } .toolbar__search { margin-left: 4px; margin-right: 4px; position: relative; } .toolbar__search input { background-color: var(--base00); border: 1px solid var(--base05); border-radius: 3px; box-sizing: border-box; font-size: 12px; height: calc(var(--toolbar-height) - 7px); line-height: normal; margin: 0; padding: 0 15px 0 4px; width: 175px; } .toolbar__search input:focus { outline: none; } .toolbar__search-clear-button { height: auto; position: absolute; right: 0; top: 3px; width: auto; } .toolbar__search-clear-button svg path { fill: var(--base11); } .warning { align-items: center; background: var(--spec00); color: var(--warning-text); display: flex; flex-direction: row; font-size: 12px; justify-content: flex-start; line-height: 1; padding: 4px 8px; } .warning__icon { display: inline-block; height: 18px; margin-right: 5px; width: 18px; } .warning__icon path { fill: var(--warning-text); } .warning__text { flex-grow: 1; margin: 0; padding: 0; } .warning__close { background: var(--spec00); border: hidden; color: var(--base13); cursor: pointer; font-weight: 200; padding: 0; text-decoration: underline; }