timeline.css in Devel 4.x
/**
* Timeline
*/
.timeline__legends {
font-size: 12px;
line-height: 1.5em;
}
.timeline__legends span {
border-left-width: 10px;
border-left-style: solid;
padding: 0 10px 0 5px;
}
.timeline__legends--default {
border-left-color: #e91e63;
}
.timeline__legends--section {
border-left-color: #3f51b5;
}
.timeline__legends--event_listener {
border-left-color: #00bcd4;
}
.timeline__legends--event_listener_loading {
border-left-color: #8bc34a;
}
.timeline__legends--template {
border-left-color: #ffc107;
}
.timeline__legends--service {
border-left-color: #795548;
}
text {
font-size: 12px;
line-height: 20px;
height: 22px;
fill: rgba(0, 0, 0, 0.87);
}
#timeline {
background: white;
margin: 10px 0;
width: 100%;
position: relative;
padding: 0 0 40px 0;
}
.timeline__row,
.timeline__scale--x,
.timeline__label rect {
stroke: rgba(0, 0, 0, 0.18);
}
.timeline__row {
fill: transparent;
}
.timeline__label rect {
fill: white;
}
.timeline__period--default {
fill: #e91e63;
}
.timeline__period--service {
fill: #795548;
}
.timeline__period--section {
fill: #3f51b5;
}
.timeline__period--event_listener {
fill: #00bcd4;
}
.timeline__period--event_listener_loading {
fill: #8bc34a;
}
.timeline__period--template {
fill: #ffc107;
}
.timeline__period-trigger {
fill: transparent;
}
.tooltip {
position: absolute;
padding: 8px;
background: rgb(0,0,0);
background: rgba(0, 0, 0, 0.87);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
width: 175px;
text-align: center;
display: none;
color: white;
}
.tooltip__title {
display: block;
}
.tooltip__content {
display: block;
}
.axis {
stroke-width: 2px;
fill: none;
}
File
webprofiler/css/timeline.css
View source
- /**
- * Timeline
- */
-
- .timeline__legends {
- font-size: 12px;
- line-height: 1.5em;
- }
-
- .timeline__legends span {
- border-left-width: 10px;
- border-left-style: solid;
- padding: 0 10px 0 5px;
- }
-
- .timeline__legends--default {
- border-left-color: #e91e63;
- }
-
- .timeline__legends--section {
- border-left-color: #3f51b5;
- }
-
- .timeline__legends--event_listener {
- border-left-color: #00bcd4;
- }
-
- .timeline__legends--event_listener_loading {
- border-left-color: #8bc34a;
- }
-
- .timeline__legends--template {
- border-left-color: #ffc107;
- }
-
- .timeline__legends--service {
- border-left-color: #795548;
- }
-
- text {
- font-size: 12px;
- line-height: 20px;
- height: 22px;
- fill: rgba(0, 0, 0, 0.87);
- }
- #timeline {
- background: white;
- margin: 10px 0;
- width: 100%;
- position: relative;
- padding: 0 0 40px 0;
- }
- .timeline__row,
- .timeline__scale--x,
- .timeline__label rect {
- stroke: rgba(0, 0, 0, 0.18);
- }
- .timeline__row {
- fill: transparent;
- }
- .timeline__label rect {
- fill: white;
- }
- .timeline__period--default {
- fill: #e91e63;
- }
- .timeline__period--service {
- fill: #795548;
- }
- .timeline__period--section {
- fill: #3f51b5;
- }
- .timeline__period--event_listener {
- fill: #00bcd4;
- }
- .timeline__period--event_listener_loading {
- fill: #8bc34a;
- }
- .timeline__period--template {
- fill: #ffc107;
- }
- .timeline__period-trigger {
- fill: transparent;
- }
- .tooltip {
- position: absolute;
- padding: 8px;
- background: rgb(0,0,0);
- background: rgba(0, 0, 0, 0.87);
- border-bottom-left-radius: 2px;
- border-bottom-right-radius: 2px;
- width: 175px;
- text-align: center;
- display: none;
- color: white;
- }
- .tooltip__title {
- display: block;
- }
- .tooltip__content {
- display: block;
- }
- .axis {
- stroke-width: 2px;
- fill: none;
- }