Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
:host {
--table-border: 2px solid var(--color-gray-50);
--table-background-color: color-mix(in srgb,
var(--color-gray-50) 20%,
transparent);
}
/* Wrapper and filter styles */
.page-wrapper {
margin: 3rem;
}
.filters-wrapper {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
gap: var(--space-large);
background: var(--background-color-canvas);
padding: var(--space-small);
}
fieldset {
flex: 1;
margin: 0;
padding-block: var(--space-small);
height: var(--input-text-min-height);
box-sizing: border-box;
gap: var(--space-medium);
}
fieldset,
.search-wrapper {
border: 1px solid var(--border-color-interactive);
border-radius: var(--border-radius-small);
height: var(--input-text-min-height);
display: inline-flex;
align-items: center;
}
.search-wrapper {
position: relative;
}
.search-icon,
.clear-icon {
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-item-small);
fill: currentColor;
-moz-context-properties: fill;
height: var(--size-item-small);
width: var(--size-item-small);
position: absolute;
inset-block: 0;
margin: auto 0;
padding: var(--space-xxsmall);
}
.search-icon {
inset-inline-start: var(--space-small);
}
.clear-icon {
inset-inline-end: var(--space-small);
}
input[type="search"] {
border: none;
padding-block: var(--space-small);
padding-inline: var(--space-xxlarge);
border-radius: var(--border-radius-small);
}
/* Table styles */
.table-wrapper {
box-sizing: border-box;
border-radius: var(--border-radius-small);
border: var(--table-border);
margin-block: 1em;
width: 100%;
& > summary {
display: flex;
align-items: center;
position: relative;
&::before {
content: "";
background-position: center;
background-repeat: no-repeat;
height: 16px;
width: 16px;
position: absolute;
inset-inline-start: 8px;
}
}
&[open] > summary::before {
}
}
.table-heading {
background-color: var(--table-background-color);
border-radius: var(---border-radius-small);
padding: 0 24px;
& h3 {
margin: 0;
padding: 0.5em;
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
color: var(--text-color);
display: inline-block;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
width: 100%;
table-layout: fixed;
}
thead {
background-color: var(--table-background-color);
border-bottom: 1px solid var(--color-gray-50);
& tr {
border-block-end: var(--table-border);
}
}
tbody td {
vertical-align: top;
color: var(--color-gray-100);
border-bottom: var(--border-width) solid var(--color-gray-50);
&.hcm-theme {
border-inline-start: var(--border-width) solid var(--color-gray-50);
}
}
tr td:last-of-type {
border-inline-end: 0;
}
tr td:first-of-type {
border-inline-start: 0;
}
tbody tr:first-of-type td {
border-block-start: 2px solid var(--color-gray-50);
}
tbody tr:last-of-type {
& td {
border-block-end: 0;
}
& td:first-of-type {
border-radius: 0 0 0 2px;
}
& td:last-of-type {
border-radius: 0 0 2px 0;
}
}
th {
font-size: var(--font-size-small);
text-transform: uppercase;
font-weight: var(--font-weight);
text-align: center;
}
tr td,
tr th {
padding: 8px;
}
td {
background: var(--color-white);
text-align: center;
}
th:first-of-type,
td:first-of-type {
text-align: start;
}
.light-theme {
background: var(--color-white);
color: var(--color-gray-100);
}
.dark-theme {
background-color: var(--color-gray-90);
color: var(--color-gray-05);
}
.hcm-theme {
background-color: #000000;
color: #ffffff;
}
.preview-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
height: 100%;
}
.value {
width: 100%;
margin: 0;
}
/* Preview cell styles */
/** Default **/
.default-preview {
height: 50px;
width: 100px;
background-color: var(--button-background-color);
border: 1px solid var(--color-gray-60);
border-radius: 4px;
}
/** Outline **/
.outline-preview {
height: 50px;
width: 100px;
background-color: color-mix(in srgb, currentColor 20%, transparent);
outline: 2px solid var(--color-gray-60);
}
/** Font **/
.text-wrapper {
backdrop-filter: contrast(0.4);
padding: var(--space-small);
width: 100%;
}
/** Icon **/
.icon-preview {
background-color: var(--color-gray-60);
height: var(--size-item-large);
width: var(--size-item-large);
/* FIXME: our icons don't seem to work when used as a mask */
mask: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/Globe_icon.svg) no-repeat center / contain;
}
/** Link **/
.link-preview {
text-decoration: underline;
&.outline {
outline: 2px solid var(--color-blue-50);
outline-offset: var(--link-focus-outline-offset);
}
}
/** Space and size **/
.space-size-preview {
display: flex;
height: 50px;
width: 75%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
& .item {
height: 50%;
width: 40%;
background-color: var(--color-blue-60);
border-radius: var(--border-radius-small);
}
}
.space-size-background {
background-color: var(--color-blue-05);
background-image: linear-gradient(135deg,
var(--color-blue-30) 10%,
#0000 0,
#0000 50%,
var(--color-blue-30) 0,
var(--color-blue-30) 60%,
#0000 0,
#0000);
background-size: 8px 8px;
border-radius: var(--border-radius-small);
border: var(--border-width) solid var(--color-gray-50);
}
/** Padding **/
.padding-item {
min-height: calc(1.5 * var(--size-item-large));
width: calc(3 * var(--size-item-large));
border-radius: var(--border-radius-small);
display: flex;
justify-content: center;
align-items: center;
&.inner {
background-color: var(--color-blue-60);
opacity: 0.5;
border-radius: 3px;
}
}