Enhance CDN packages and playground
Amp-Thread-ID: https://ampcode.com/threads/T-01a02485-5574-707c-bff4-5668d83bee8a Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
This commit is contained in:
Amp
@@ -0,0 +1,457 @@
|
||||
.theme-select {
|
||||
width: 72px;
|
||||
height: 32px;
|
||||
padding: 0 7px;
|
||||
color: #53667c;
|
||||
border: 1px solid #d4e1ea;
|
||||
border-radius: 6px;
|
||||
outline: 0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
.theme-select:hover {
|
||||
color: #177fc2;
|
||||
border-color: #add5ee;
|
||||
}
|
||||
.theme-select:focus-visible {
|
||||
border-color: #62b8eb;
|
||||
box-shadow: 0 0 0 3px rgb(50 166 232 / 14%);
|
||||
}
|
||||
.tool-context {
|
||||
font-size: 10px;
|
||||
}
|
||||
.stage-meta,
|
||||
.editor-status {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ink: #d9e9f7;
|
||||
--muted: #91a6b9;
|
||||
--line: #20384b;
|
||||
--line-strong: #315069;
|
||||
--sky-25: #0a1927;
|
||||
--sky-50: #0d2132;
|
||||
--sky-100: #12324a;
|
||||
--sky-200: #1d4c6a;
|
||||
--navy: #06111d;
|
||||
}
|
||||
html[data-theme="dark"] body {
|
||||
color: var(--ink);
|
||||
background: #081522;
|
||||
}
|
||||
html[data-theme="dark"] .theme-select {
|
||||
color: #b4c8d8;
|
||||
border-color: #29465d;
|
||||
background: #0e2232;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .site-header {
|
||||
border-color: var(--line);
|
||||
}
|
||||
html[data-theme="dark"] .wordmark {
|
||||
color: #e1eff9;
|
||||
}
|
||||
html[data-theme="dark"] .site-nav a,
|
||||
html[data-theme="dark"] .site-footer nav a {
|
||||
color: #91a7ba;
|
||||
}
|
||||
html[data-theme="dark"] .button-quiet {
|
||||
color: #b9d1e2;
|
||||
border-color: #315069;
|
||||
background: #0d2030;
|
||||
}
|
||||
html[data-theme="dark"] .button-quiet:hover {
|
||||
color: #72c8f7;
|
||||
background: #102a3e;
|
||||
}
|
||||
html[data-theme="dark"] .hero::before {
|
||||
background: radial-gradient(circle, rgb(30 102 148 / 35%), transparent 67%);
|
||||
}
|
||||
html[data-theme="dark"] .hero h1 {
|
||||
color: #edf7ff;
|
||||
}
|
||||
html[data-theme="dark"] .hero-note {
|
||||
color: #718ba0;
|
||||
}
|
||||
html[data-theme="dark"] .hero-demo {
|
||||
border-color: #2a4a61;
|
||||
background: #0a1927;
|
||||
box-shadow: 0 30px 70px rgb(0 0 0 / 28%);
|
||||
}
|
||||
html[data-theme="dark"] .demo-toolbar {
|
||||
color: #819bb0;
|
||||
border-color: #284257;
|
||||
background: #0d2131;
|
||||
}
|
||||
html[data-theme="dark"] .hero-demo pre {
|
||||
color: #b6cad9;
|
||||
background: #091827;
|
||||
}
|
||||
html[data-theme="dark"] .trust-strip {
|
||||
background: #0a1927;
|
||||
}
|
||||
html[data-theme="dark"] .trust-strip strong {
|
||||
color: #d7e8f5;
|
||||
}
|
||||
html[data-theme="dark"] .trust-strip span {
|
||||
color: #8298ab;
|
||||
}
|
||||
html[data-theme="dark"] .gear-card {
|
||||
border-color: #20394c;
|
||||
background: #0b1b29;
|
||||
box-shadow: 0 8px 30px rgb(0 0 0 / 16%);
|
||||
}
|
||||
html[data-theme="dark"] .gear-card-featured {
|
||||
border-color: #285876;
|
||||
background: linear-gradient(145deg, #0e2940, #0b1b29);
|
||||
}
|
||||
html[data-theme="dark"] .gear-number {
|
||||
color: #52728a;
|
||||
}
|
||||
html[data-theme="dark"] .gear-icon {
|
||||
border-color: #285675;
|
||||
background: #0e2a40;
|
||||
}
|
||||
html[data-theme="dark"] .gear-card h3 {
|
||||
color: #d9eaf6;
|
||||
}
|
||||
html[data-theme="dark"] .gear-card p {
|
||||
color: #91a5b6;
|
||||
}
|
||||
html[data-theme="dark"] .graph-icon::before,
|
||||
html[data-theme="dark"] .graph-icon::after {
|
||||
background: #0e2a40;
|
||||
}
|
||||
html[data-theme="dark"] .steps h3 {
|
||||
color: #d5e6f3;
|
||||
}
|
||||
html[data-theme="dark"] .steps p {
|
||||
color: #8fa4b6;
|
||||
}
|
||||
html[data-theme="dark"] .steps code {
|
||||
color: #6fc3f1;
|
||||
border-color: #29465c;
|
||||
background: #0c2030;
|
||||
}
|
||||
html[data-theme="dark"] .step-index {
|
||||
border-color: #285b7a;
|
||||
background: #0e2a40;
|
||||
}
|
||||
html[data-theme="dark"] .site-footer p {
|
||||
color: #738da1;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .docs-body {
|
||||
background: #081522;
|
||||
}
|
||||
html[data-theme="dark"] .docs-header {
|
||||
border-color: #20384b;
|
||||
background: rgb(8 21 34 / 94%);
|
||||
}
|
||||
html[data-theme="dark"] .docs-product {
|
||||
color: #8097aa;
|
||||
border-color: #294257;
|
||||
}
|
||||
html[data-theme="dark"] .docs-search {
|
||||
color: #7891a5;
|
||||
border-color: #29465b;
|
||||
background: #0d2030;
|
||||
}
|
||||
html[data-theme="dark"] .docs-search input {
|
||||
color: #d6e7f4;
|
||||
}
|
||||
html[data-theme="dark"] .docs-search kbd {
|
||||
color: #8299ab;
|
||||
border-color: #304c61;
|
||||
background: #102536;
|
||||
}
|
||||
html[data-theme="dark"] .docs-sidebar {
|
||||
border-color: #20384b;
|
||||
}
|
||||
html[data-theme="dark"] .sidebar-group > strong,
|
||||
html[data-theme="dark"] .docs-toc > strong {
|
||||
color: #708ba0;
|
||||
}
|
||||
html[data-theme="dark"] .sidebar-group a {
|
||||
color: #91a5b7;
|
||||
}
|
||||
html[data-theme="dark"] .sidebar-group a:hover {
|
||||
color: #69c4f5;
|
||||
background: #0d2436;
|
||||
}
|
||||
html[data-theme="dark"] .sidebar-group a.active {
|
||||
color: #70cbfb;
|
||||
background: #10304a;
|
||||
}
|
||||
html[data-theme="dark"] .sidebar-playground {
|
||||
color: #8bd4fa;
|
||||
border-color: #285572;
|
||||
background: #0d2940;
|
||||
}
|
||||
html[data-theme="dark"] .sidebar-playground small {
|
||||
color: #7697ad;
|
||||
}
|
||||
html[data-theme="dark"] .docs-main section + section {
|
||||
border-color: #20384b;
|
||||
}
|
||||
html[data-theme="dark"] .docs-main h1,
|
||||
html[data-theme="dark"] .docs-main h2,
|
||||
html[data-theme="dark"] .docs-main h3 {
|
||||
color: #e0edf7;
|
||||
}
|
||||
html[data-theme="dark"] .docs-main p,
|
||||
html[data-theme="dark"] .docs-main li {
|
||||
color: #9aafc0;
|
||||
}
|
||||
html[data-theme="dark"] .docs-main strong {
|
||||
color: #c4d8e7;
|
||||
}
|
||||
html[data-theme="dark"] .doc-lede {
|
||||
color: #a9bdcc !important;
|
||||
}
|
||||
html[data-theme="dark"] .docs-main :not(pre) > code {
|
||||
color: #71c6f3;
|
||||
border-color: #28506a;
|
||||
background: #0d293d;
|
||||
}
|
||||
html[data-theme="dark"] .section-kicker span {
|
||||
border-color: #285a78;
|
||||
background: #0e2b42;
|
||||
}
|
||||
html[data-theme="dark"] .callout {
|
||||
border-color: #294052;
|
||||
background: #0c1c2a;
|
||||
}
|
||||
html[data-theme="dark"] .callout-blue {
|
||||
border-color: #285672;
|
||||
background: #0d293e;
|
||||
}
|
||||
html[data-theme="dark"] .explain-grid > div {
|
||||
border-color: #263f52;
|
||||
background: #0b1c2a;
|
||||
}
|
||||
html[data-theme="dark"] .inline-play {
|
||||
color: #8bd5fb;
|
||||
border-color: #285974;
|
||||
background: #0e2c43;
|
||||
}
|
||||
html[data-theme="dark"] .inline-play strong {
|
||||
color: #a2defb;
|
||||
}
|
||||
html[data-theme="dark"] .inline-play small {
|
||||
color: #789bb1;
|
||||
}
|
||||
html[data-theme="dark"] .mental-model > div {
|
||||
border-color: #284356;
|
||||
background: #0b1d2b;
|
||||
}
|
||||
html[data-theme="dark"] .mental-model strong {
|
||||
color: #b9d0e0;
|
||||
}
|
||||
html[data-theme="dark"] .mental-model .mental-shared {
|
||||
border-color: #2d6585;
|
||||
background: #0e2c43;
|
||||
}
|
||||
html[data-theme="dark"] .deploy-list li {
|
||||
border-color: #20384b;
|
||||
}
|
||||
html[data-theme="dark"] .docs-toc a {
|
||||
color: #768ea1;
|
||||
border-color: #294257;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .playground-app {
|
||||
background: #07131f;
|
||||
}
|
||||
html[data-theme="dark"] .playground-header {
|
||||
border-color: #21384b;
|
||||
background: #0b1b29;
|
||||
}
|
||||
html[data-theme="dark"] .playground-brand {
|
||||
color: #dcebf6;
|
||||
}
|
||||
html[data-theme="dark"] .header-divider {
|
||||
background: #294154;
|
||||
}
|
||||
html[data-theme="dark"] .project-name input {
|
||||
color: #c3d6e4;
|
||||
}
|
||||
html[data-theme="dark"] .project-name input:hover {
|
||||
background: #102536;
|
||||
}
|
||||
html[data-theme="dark"] .project-name input:focus {
|
||||
border-color: #2d7198;
|
||||
background: #0e2638;
|
||||
}
|
||||
html[data-theme="dark"] #revision-label {
|
||||
color: #8298aa;
|
||||
border-color: #294356;
|
||||
background: #0e2131;
|
||||
}
|
||||
html[data-theme="dark"] .playground-nav a {
|
||||
color: #8da3b5;
|
||||
}
|
||||
html[data-theme="dark"] .tool-button {
|
||||
color: #a7bdcd;
|
||||
border-color: #29465c;
|
||||
background: #0e2232;
|
||||
}
|
||||
html[data-theme="dark"] .tool-button:hover {
|
||||
color: #67c4f4;
|
||||
border-color: #326484;
|
||||
background: #102a3d;
|
||||
}
|
||||
html[data-theme="dark"] .playground-tools {
|
||||
border-color: #233b4e;
|
||||
background: #0c1d2b;
|
||||
}
|
||||
html[data-theme="dark"] .tool-group button {
|
||||
color: #8fa6b8;
|
||||
}
|
||||
html[data-theme="dark"] .tool-group button:hover,
|
||||
html[data-theme="dark"] .tool-group button[aria-pressed="true"] {
|
||||
color: #63c3f5;
|
||||
border-color: #2b4d64;
|
||||
background: #102536;
|
||||
}
|
||||
html[data-theme="dark"] .tool-context,
|
||||
html[data-theme="dark"] .stage-meta,
|
||||
html[data-theme="dark"] .editor-status {
|
||||
color: #aec1cf;
|
||||
}
|
||||
html[data-theme="dark"] .context-divider {
|
||||
background: #294154;
|
||||
}
|
||||
html[data-theme="dark"] .snippets-dialog {
|
||||
color: #d3e3ee;
|
||||
border-color: #2a4a60;
|
||||
background: #0b1b29;
|
||||
}
|
||||
html[data-theme="dark"] .dialog-heading p {
|
||||
color: #8399aa;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-search {
|
||||
color: #7890a3;
|
||||
border-color: #29465b;
|
||||
background: #0d2131;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-search input {
|
||||
color: #c9dae7;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-grid > button:hover {
|
||||
border-color: #2d5772;
|
||||
background: #0e293d;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-icon {
|
||||
border-color: #2a5a77;
|
||||
background: #0e2c43;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-grid strong {
|
||||
color: #c9dce9;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-grid small {
|
||||
color: #8298aa;
|
||||
}
|
||||
html[data-theme="dark"] .snippet-grid code {
|
||||
color: #6bc4f2;
|
||||
border-color: #29475d;
|
||||
background: #0d2131;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .workbench {
|
||||
background: #d7e4ed;
|
||||
}
|
||||
html[data-theme="light"] .pane-tabs,
|
||||
html[data-theme="light"] .stage-toolbar {
|
||||
border-color: #cfdee8;
|
||||
background: #edf4f8;
|
||||
}
|
||||
html[data-theme="light"] .pane-tab {
|
||||
color: #60778a;
|
||||
border-color: #d5e2ea;
|
||||
background: #e8f0f5;
|
||||
}
|
||||
html[data-theme="light"] .pane-tab.active {
|
||||
color: #29465e;
|
||||
background: #f8fbfd;
|
||||
}
|
||||
html[data-theme="light"] .editor {
|
||||
background: #fff;
|
||||
}
|
||||
html[data-theme="light"] .monaco-editor .margin {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
html[data-theme="light"] .editor-status {
|
||||
color: #718698;
|
||||
border-color: #d2e0e9;
|
||||
background: #eff5f8;
|
||||
}
|
||||
html[data-theme="light"] .resize-handle {
|
||||
background: #c8d8e3;
|
||||
}
|
||||
html[data-theme="light"] .resize-handle::after {
|
||||
background: #8fa9bb;
|
||||
}
|
||||
html[data-theme="light"] .stage-pane {
|
||||
background: #e7f0f5;
|
||||
}
|
||||
html[data-theme="light"] .stage-tabs button {
|
||||
color: #60778a;
|
||||
}
|
||||
html[data-theme="light"] .stage-tabs button.active {
|
||||
color: #284961;
|
||||
background: #f8fbfd;
|
||||
}
|
||||
html[data-theme="light"] .stage-meta {
|
||||
color: #6a8194;
|
||||
}
|
||||
html[data-theme="light"] .stage-divider {
|
||||
background: #c5d7e2;
|
||||
}
|
||||
html[data-theme="light"] .inspector {
|
||||
border-color: #cddde7;
|
||||
background: #f7fafc;
|
||||
}
|
||||
html[data-theme="light"] .inspector-tabs {
|
||||
border-color: #cfdee7;
|
||||
background: #edf4f8;
|
||||
}
|
||||
html[data-theme="light"] .inspector-tabs button {
|
||||
color: #687f91;
|
||||
}
|
||||
html[data-theme="light"] .inspector-tabs button.active {
|
||||
color: #287aa9;
|
||||
}
|
||||
html[data-theme="light"] .inspector-tabs button span {
|
||||
background: #dce9f1;
|
||||
}
|
||||
html[data-theme="light"] .console-empty,
|
||||
html[data-theme="light"] .profile-empty {
|
||||
color: #6f8799;
|
||||
}
|
||||
html[data-theme="light"] #console-lines {
|
||||
color: #526c80;
|
||||
}
|
||||
html[data-theme="light"] #console-lines li {
|
||||
border-color: rgb(190 207 218 / 60%);
|
||||
}
|
||||
html[data-theme="light"] .profile-summary > div {
|
||||
border-color: #d3e1e9;
|
||||
background: #eef5f8;
|
||||
}
|
||||
html[data-theme="light"] .profile-summary strong {
|
||||
color: #3c6e8d;
|
||||
}
|
||||
html[data-theme="light"] .profile-results th,
|
||||
html[data-theme="light"] .profile-results td {
|
||||
border-color: #d5e2e9;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.site-header .theme-select {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user