blob: f6435cc1962317d93cb89538c1dd313bb9e49458 [file] [log] [blame] [edit]
@import '../../../elements-sk/modules/styles/select';
@import '../styles.scss';
* {
// We use z=1 as our 'base', so that our row highlighting underlay can exist
// between the background(body) and content.
z-index: 1;
}
commits-table-sk {
background-color: var(--surface);
color: var(--on-surface);
.commitsTableContainer {
display: grid;
// Make the legend and commit columns shrink to content so with few taskspecs the commits don't
// awkwardly take up a large portion of the screen.
grid-template-columns: min-content min-content auto;
// Specify header rows (controls, taskspecs, etc) as dynamically sized, then force all
// commit/task rows to be 18px (plus 2px gap).
grid-template-rows: min-content min-content min-content min-content;
grid-auto-rows: 18px;
gap: 2px 2px;
}
.rowUnderlay {
display: contents;
div {
z-index: 0;
}
div:nth-child(odd) {
background-color: var(--surface);
}
}
.task-spec {
background-color: var(--surface);
border-radius: 5px;
border: 1px solid;
cursor: pointer;
height: 20px;
min-width: 20px;
justify-content: center;
text-align: center;
}
.commit-container {
display: flex;
position: relative;
.time-spacer {
display: flex;
margin-right: 1px;
width: 25px;
position: relative;
.time-label {
font-family: monospace;
font-size: 0.75em;
background-color: #616161;
color: #ffffff;
border-radius: 3px;
bottom: -5.5px;
right: 2px;
color: white;
margin: auto;
padding: 1px;
position: absolute;
z-index: 2;
}
}
.time-underline {
border-bottom: 2px solid #616161;
bottom: -2px;
height: 0;
left: 20px;
position: absolute;
right: -3px;
}
}
.highlight-row {
pointer-events: none;
border-bottom-color: var(--secondary);
border-bottom-width: 3px;
border-bottom-style: solid;
margin-bottom: 7px;
visibility: hidden;
}
.commit-container:hover + .highlight-row {
visibility: visible;
}
.commit {
font-family: monospace;
font-size: 0.75em;
position: relative;
cursor: pointer;
display: flex;
justify-content: space-between;
height: 16px;
width: 100%;
border-left-width: 3px;
border-left-style: solid;
border-left-color: transparent;
padding-left: 2px;
span {
line-height: 16px;
pointer-events: none;
}
span.icons * {
pointer-events: auto;
}
}
.commit.highlight-revert {
background-color: var(--error);
color: var(--on-error);
fill: var(--on-error);
}
.commit.highlight-reland {
background-color: var(--primary);
color: var(--on-primary);
fill: var(--on-primary);
}
.commit.task-emphasize-success {
border-left-color: var(--success);
}
.commit.task-emphasize-warning {
border-left-color: var(--warning);
}
.commit.task-emphasize-failure {
border-left-color: var(--failure);
}
.commit.task-emphasize-mishap {
border-left-color: var(--unexpected);
}
.commit.task-emphasize-unknown,
.commit.task-emphasize- {
border-left-color: var(--primary);
}
.legend {
font-size: 10px;
min-width: 100px;
* {
padding: 5px;
}
}
.controls .horizontal {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.commitLabelSelector {
padding-right: 40px;
padding-left: 10px;
}
#searchInput {
width: 200px;
margin-left: 10px;
margin-bottom: 3px;
margin-right: 10px;
}
// Style search input similar to how the buttons are styled when selected.
#searchInput.selected {
border-bottom: solid 4px var(--primary);
input {
color: var(--primary);
font-weight: 700;
}
}
.lastLoaded {
padding-top: 10px;
}
.reloadControls {
#repoLabel {
position: relative;
top: 30px;
left: 3px;
width: min-content;
}
select {
padding: 2px 0px;
margin-left: 0px;
width: 180px;
text-align-last: center;
text-align: center;
font-size: 16px;
}
input-sk {
input {
width: 100px;
}
}
}
.tiny svg {
width: 12px;
height: 12px;
}
radio-sk.tiny .box {
width: 8px;
height: 8px;
}
// With the exception of revert/reland icons, we don't want icons interferring with our
// dialog-opening clicks on tasks, commits, and task specs.
comment-icon-sk,
texture-icon-sk,
block-icon-sk {
pointer-events: none;
}
.tasksTable {
min-height: 780px;
grid-column: 2 / 3;
grid-row: 1 / -1;
border: solid 1px;
display: contents;
}
.category {
border: solid 1px var(--surface-1dp);
padding: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.task {
border-radius: 3px;
border: solid 1px var(--surface-1dp);
cursor: pointer;
text-align: center;
}
.multicommit-task {
display: grid;
// Lock the rows' height so a comment icon, if present, doesn't skew the individual divs.
grid-auto-rows: 1fr;
.task {
border-radius: initial;
border: initial;
border-left: solid 1px;
border-right: solid 1px;
}
.task:first-child {
border-top: solid 1px;
border-radius: 3px 3px 0px 0px;
}
.task:last-child {
border-bottom: solid 1px;
border-radius: 0px 0px 3px 3px;
}
.task.dashed-top {
border-top: dashed 1px;
}
.task.dashed-bottom {
border-bottom: dashed 1px;
}
}
.multicommit-task:hover {
border-color: red;
border-radius: 3px;
border: solid 1px;
cursor: pointer;
}
.task.bg-failure {
background-color: var(--failure);
}
.task.bg-mishap {
background-color: var(--unexpected);
}
.grow:hover {
transform: scale(1.1);
opacity: 1;
z-index: 2;
}
.grow:hover.bg-success,
.grow:hover .bg-success {
background-color: var(--success);
}
.grow:hover.bg-failure,
.grow:hover .bg-failure {
background-color: var(--failure);
}
.grow:hover.bg-mishap,
.grow:hover .bg-mishap {
background-color: var(--unexpected);
}
.fill-green {
fill: var(--success);
}
.fill-red {
fill: var(--failure);
}
}
div.hidden.task {
visibility: hidden;
}
tabs-sk > button {
border-bottom-color: var(--surface-2dp);
}