| @import '../styles.scss'; |
| |
| details-dialog-sk { |
| display: none; |
| z-index: 5; |
| .dialog { |
| position: fixed; |
| box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), |
| 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); |
| padding: 15px; |
| border-radius: 10px; |
| border: none; |
| top: 30vh; |
| left: 30vw; |
| height: 40vh; |
| width: 40vw; |
| overflow: auto; |
| margin: 0; |
| background-color: var(--surface); |
| color: var(--on-surface); |
| fill: var(--on-surface); |
| |
| a { |
| color: var(--on-surface); |
| fill: var(--on-surface); |
| } |
| } |
| |
| header { |
| display: flex; |
| justify-content: space-between; |
| gap: 8px; |
| align-items: flex-start; |
| |
| > * { |
| margin: 0; |
| } |
| |
| .spacer { |
| flex-grow: 1; |
| } |
| |
| button.action { |
| padding: 10px 4px; |
| } |
| } |
| |
| .small-icon svg { |
| width: 18px; |
| height: 18px; |
| } |
| |
| .clickable { |
| cursor: pointer; |
| } |
| |
| // The title container is sometimes wide due to child elements farther down the dialog being wide |
| // (i.e. task-driver-sk). Don't let it get in the way of the close button. |
| .titleContainer { |
| pointer-events: none; |
| * { |
| pointer-events: auto; |
| } |
| } |
| |
| .task-success { |
| background-color: var(--success); |
| color: var(--on-success); |
| } |
| |
| .task-failure { |
| background-color: var(--failure); |
| color: var(--on-failure); |
| } |
| } |