| @import '~elements-sk/icon/icon-sk'; |
| @import '~elements-sk/toast-sk/toast-sk'; |
| @import '~elements-sk/styles/buttons/buttons'; |
| @import '~elements-sk/themes/themes'; |
| @import '../theme/theme'; |
| |
| machine-server-sk { |
| --header-height: 40px; |
| |
| header { |
| padding: 8px; |
| background: var(--surface-1dp); |
| display: flex; |
| width: calc(100% - 16px); |
| border-bottom: solid 1px var(--on-surface); |
| position: fixed; |
| top: 0; |
| z-index: 10; |
| justify-content: space-between; |
| |
| #header-rhs { |
| display: flex; |
| align-items: center; |
| } |
| } |
| |
| table { |
| border-collapse: collapse; |
| } |
| |
| thead { |
| background: var(--surface-1dp); |
| position: sticky; |
| z-index: 1; |
| top: var(--header-height); |
| |
| // If we just put a bottom border on the thead, it scrolls away when you |
| // scroll the table. |
| &:after { |
| bottom: 0; |
| border-bottom: solid 1px var(--on-surface); |
| content: ""; |
| position: absolute; |
| width: 100%; |
| } |
| } |
| |
| tr { |
| border-bottom: 1px solid var(--on-background); |
| } |
| |
| // In both the thead (so it doesn't pile up with the :after border at some |
| // zoom levels) and the tbody: |
| tr:last-child { |
| border-bottom: none; |
| } |
| |
| th { |
| padding: 4px; |
| } |
| |
| td { |
| vertical-align: top; |
| padding: 8px 4px 4px 4px; |
| } |
| |
| td.outOfSpec { |
| color: var(--error); |
| font-weight: bold; |
| } |
| |
| main { |
| margin-top: var(--header-height); |
| } |
| |
| a:visited, |
| a { |
| color: var(--primary); |
| } |
| |
| // Override the <button> styles from elements-sk to produce more compact buttons. |
| // |
| // This is not necessary under Webpack because this component does not explicitly import the |
| // button.scss stylesheet from elements-sk. The Bazel build, however, automatically imports the |
| // styles of any elements-sk components referenced from TypeScript. Thus, we need to reset the |
| // below styles. |
| button { |
| height: auto !important; |
| margin: 0; |
| padding: 4px; |
| text-transform: capitalize; |
| } |
| } |
| |
| machine-server-sk[waiting] * { |
| cursor: wait; |
| } |