add official Chrome feature demos
This commit is contained in:
@@ -0,0 +1,463 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #121417;
|
||||
--muted: #65727d;
|
||||
--paper: #fffdf8;
|
||||
--panel: #f4f1e8;
|
||||
--line: #d7d0bf;
|
||||
--blue: #164db3;
|
||||
--green: #0c7356;
|
||||
--amber: #a26000;
|
||||
--red: #b03831;
|
||||
--violet: #6747b8;
|
||||
--code: #18222d;
|
||||
--shadow: 0 20px 60px rgb(35 37 42 / 0.13);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(18 20 23 / 0.055) 1px, transparent 1px),
|
||||
linear-gradient(rgb(18 20 23 / 0.055) 1px, transparent 1px),
|
||||
#ece6d8;
|
||||
background-size: 30px 30px;
|
||||
font-family: Avenir Next, Trebuchet MS, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
|
||||
gap: 22px;
|
||||
min-height: 100vh;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.rail,
|
||||
.stage,
|
||||
.panel,
|
||||
.card,
|
||||
.console {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 253 248 / 0.92);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.rail {
|
||||
position: sticky;
|
||||
top: 28px;
|
||||
align-self: start;
|
||||
min-height: calc(100vh - 56px);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.stage {
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--blue);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 11ch;
|
||||
margin-bottom: 16px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(40px, 5vw, 72px);
|
||||
line-height: 0.94;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 12px;
|
||||
font-size: clamp(24px, 3vw, 38px);
|
||||
line-height: 1.05;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 19px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted,
|
||||
.card p,
|
||||
.panel p,
|
||||
li {
|
||||
color: var(--muted);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 26px 0;
|
||||
}
|
||||
|
||||
.nav a,
|
||||
.nav button,
|
||||
.link-button,
|
||||
.primary,
|
||||
.ghost {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.nav a:hover,
|
||||
.nav a.active,
|
||||
.nav button:hover,
|
||||
.link-button:hover,
|
||||
.ghost:hover {
|
||||
border-color: var(--blue);
|
||||
background: #eef4ff;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border-color: var(--ink);
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.num,
|
||||
.icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.note {
|
||||
border-left: 4px solid var(--amber);
|
||||
background: #fff3d6;
|
||||
color: #6f4707;
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
|
||||
gap: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.statement {
|
||||
min-height: 250px;
|
||||
padding: 28px;
|
||||
color: white;
|
||||
background:
|
||||
linear-gradient(135deg, rgb(18 20 23 / 0.96), rgb(22 77 179 / 0.83)),
|
||||
radial-gradient(circle at 20% 18%, rgb(255 255 255 / 0.22), transparent 26%);
|
||||
}
|
||||
|
||||
.statement .eyebrow,
|
||||
.statement p {
|
||||
color: rgb(255 255 255 / 0.78);
|
||||
}
|
||||
|
||||
.statement h2 {
|
||||
max-width: 760px;
|
||||
margin-bottom: 16px;
|
||||
font-size: clamp(30px, 5vw, 58px);
|
||||
}
|
||||
|
||||
.metrics,
|
||||
.grid,
|
||||
.two-col {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric,
|
||||
.panel,
|
||||
.card,
|
||||
.console {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.metric {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.metric strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.metric span {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.two-col {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid transparent;
|
||||
padding: 3px 9px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.tag.blue,
|
||||
.pill.blue {
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.tag.green,
|
||||
.pill.green {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.tag.amber,
|
||||
.pill.amber {
|
||||
background: var(--amber);
|
||||
}
|
||||
|
||||
.tag.red,
|
||||
.pill.red {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.tag.violet,
|
||||
.pill.violet {
|
||||
background: var(--violet);
|
||||
}
|
||||
|
||||
.pill.neutral {
|
||||
border-color: var(--line);
|
||||
background: var(--paper);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 190px;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 14px 34px rgb(22 77 179 / 0.16);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card ul {
|
||||
margin: 14px 0 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 9px 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.controls button.secondary {
|
||||
border-color: var(--line);
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 110px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.code,
|
||||
.console pre {
|
||||
overflow: auto;
|
||||
border: 1px solid #303b48;
|
||||
background: var(--code);
|
||||
color: #d8e4ef;
|
||||
padding: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.console {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.console pre {
|
||||
max-height: 460px;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.status-row,
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.status {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.status span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border: 1px solid var(--line);
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table td {
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.shell,
|
||||
.hero,
|
||||
.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rail,
|
||||
.console {
|
||||
position: static;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.grid,
|
||||
.status-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user