@import “variables”; @import “fonts”; @import “normalize”;
.rwpt-toolbar {
margin-top: 40px;
}
rack-webprofiler-bar {
position: fixed; height: auto; left: 0; bottom: 0; font-family: $fonts; // Specify the container font-size, to prevent a global stylesheet side-effect. font-size: 16px; @include normalize; * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-osx-font-smooth: grayscale; margin: 0; padding: 0; } a { text-decoration: none; } &.rack-webprofiler--long { width: 100%; background-color: $profiler_bar_background; } .rack-webprofiler__wrapper { display: table; } .rack-webprofiler__item { display: table-cell; position: relative; background-color: $profiler_bar_background; a, .rack-webprofiler__item-content { // Position is important here, because .details will base itself on it! position: relative; display: block; height: 40px; padding: 10px; box-sizing: border-box; line-height: 20px; border-top: 1px $profiler_bar_border solid; border-right: 1px $profiler_bar_border solid; } } .rack-webprofiler__item:hover { background-color: $profiler_bar__item_hover; } .rack-webprofiler__item:hover .details { display: block; } .rack-webprofiler__item i.icn { float: left; height: 20px; margin-right: 5px; img { display: block; height: 100%; width: auto; } } .rack-webprofiler__item--close { width: 45px; text-align: center; -webkit-user-select: none; user-select: none; cursor: pointer; } .rack-webprofiler__item--close i.icn { padding: 0px; } .rack-webprofiler__item__label, .rack-webprofiler__item__value { font-weight: 600; font-size: 14px; color: $light_grey; } .rack-webprofiler__item__value { float: left; line-height: 20px; color: $tiny_grey; vertical-align: middle; } .rack-webprofiler__item__status-color { display: block; position: absolute; width: 100%; height: 4px; left: 0; right: 0; bottom: 0; &.success { background-color: $success_color; } &.warning { background-color: $warning_color; } &.danger { background-color: $danger_color; } } .details { display: none; width: auto; position: absolute; top: -1px; left: -1px; transform: translate3d(0, -100%, 0); background: $dark_blue_hover; .wrapper { box-sizing: border-box; padding: 10px; border: 1px solid $dark_blue_light; border-bottom: 0; } dl { dt { float: left; clear: left; width: $profiler_bar__item_details_label_width; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: $light_grey; } dd { margin-left: $profiler_bar__item_details_label_width; font-weight: 400; color: $tiny_grey; } dt, dd { text-align: left; white-space: nowrap; } } }
}
/*#rack-webprofiler {
position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; background-color: #1c1f33; color: #f3fcf0; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px;
}
rack-webprofiler .rack-webprofiler_collectors {
height: 40px;
}
rack-webprofiler .rack-webprofiler_collectors > .rack-webprofiler_collector {
float: left; padding: 0 10px; border: 1px solid #282f4c; height: 38px; line-height: 40px;
}
rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector img {
width: 20px; height: 20px; position: relative; top: 4px;
} rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.error, rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.success {
height: 35px; border-bottom-style: solid; border-bottom-width: 4px;
} rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.error {
border-bottom-color: #ff2851;
} rack-webprofiler .rack-webprofiler_collectors .rack-webprofiler_collector.success {
border-bottom-color: #44db5e;
}*/