161 lines
6.1 KiB
HTML
161 lines
6.1 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
:root {
|
|
--base03: #212630;
|
|
--base02: #2c303a;
|
|
--base01: #676b72;
|
|
--base00: #74777e;
|
|
--base0: #8e9197;
|
|
--base1: #9b9ea3;
|
|
--base2: #e7e8ea;
|
|
--base3: #f5f6f7;
|
|
--magenta: #d63878;
|
|
--red: #d73c55;
|
|
--orange: #c45521;
|
|
--yellow: #937300;
|
|
--green: #008c3c;
|
|
--cyan: #00909b;
|
|
--blue: #008dcb;
|
|
--violet: #b84caf;
|
|
--magenta-d: #8b003c;
|
|
--red-d: #8a001e;
|
|
--orange-d: #791100;
|
|
--yellow-d: #503800;
|
|
--green-d: #004b00;
|
|
--cyan-d: #004e5c;
|
|
--blue-d: #004d87;
|
|
--violet-d: #72006d;
|
|
--magenta-l: #ff82b9;
|
|
--red-l: #ff8593;
|
|
--orange-l: #ff975e;
|
|
--yellow-l: #dcb438;
|
|
--green-l: #46d17a;
|
|
--cyan-l: #00d6e0;
|
|
--blue-l: #00d1ff;
|
|
--violet-l: #ff90f5;
|
|
}
|
|
div.dark > div , div.light > div {
|
|
width: 80px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin: 1px;
|
|
}
|
|
html {
|
|
background-color: var(--base03);
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
color: var(--base0);
|
|
}
|
|
body { width: 730px; margin: 0 auto; }
|
|
.dark {background-color: var(--base03); width: 100%; margin: 20px; padding: 20px; }
|
|
.dark > .base2, .dark > .base3 { visibility: hidden; }
|
|
.light {background-color: var(--base3); width: 100%; margin: 20px; padding: 20px; }
|
|
.light > .base02, .light > .base03 { visibility: hidden; }
|
|
.base03 { background-color: var(--base03); color: var(--base0); }
|
|
.base02 { background-color: var(--base02); color: var(--base1); }
|
|
.base01 { color: var(--base01); }
|
|
.base00 { color: var(--base00); }
|
|
.base0 { color: var(--base0); }
|
|
.base1 { color: var(--base1); }
|
|
.base2 { background-color: var(--base2); color: var(--base01); }
|
|
.base3 { background-color: var(--base3); color: var(--base00); }
|
|
.magenta { color: var(--magenta); }
|
|
.red { color: var(--red); }
|
|
.orange { color: var(--orange); }
|
|
.yellow { color: var(--yellow); }
|
|
.green { color: var(--green); }
|
|
.cyan { color: var(--cyan); }
|
|
.blue { color: var(--blue); }
|
|
.violet { color: var(--violet); }
|
|
.magenta-d { color: var(--magenta-d); }
|
|
.red-d { color: var(--red-d); }
|
|
.orange-d { color: var(--orange-d); }
|
|
.yellow-d { color: var(--yellow-d); }
|
|
.green-d { color: var(--green-d); }
|
|
.cyan-d { color: var(--cyan-d); }
|
|
.blue-d { color: var(--blue-d); }
|
|
.violet-d { color: var(--violet-d); }
|
|
.magenta-l { color: var(--magenta-l); }
|
|
.red-l { color: var(--red-l); }
|
|
.orange-l { color: var(--orange-l); }
|
|
.yellow-l { color: var(--yellow-l); }
|
|
.green-l { color: var(--green-l); }
|
|
.cyan-l { color: var(--cyan-l); }
|
|
.blue-l { color: var(--blue-l); }
|
|
.violet-l { color: var(--violet-l); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dark">
|
|
<div class="base03">base03</div>
|
|
<div class="base02">base02</div>
|
|
<div class="base01">base01</div>
|
|
<div class="base00">base00</div>
|
|
<div class="base0">base0</div>
|
|
<div class="base1">base1</div>
|
|
<div class="base2">base2</div>
|
|
<div class="base3">base3</div>
|
|
<div class="magenta">magenta</div>
|
|
<div class="red">red</div>
|
|
<div class="orange">orange</div>
|
|
<div class="yellow">yellow</div>
|
|
<div class="green">green</div>
|
|
<div class="cyan">cyan</div>
|
|
<div class="blue">blue</div>
|
|
<div class="violet">violet</div>
|
|
<div class="magenta-d">magenta-d</div>
|
|
<div class="red-d">red-d</div>
|
|
<div class="orange-d">orange-d</div>
|
|
<div class="yellow-d">yellow-d</div>
|
|
<div class="green-d">green-d</div>
|
|
<div class="cyan-d">cyan-d</div>
|
|
<div class="blue-d">blue-d</div>
|
|
<div class="violet-d">violet-d</div>
|
|
<div class="magenta-l">magenta-l</div>
|
|
<div class="red-l">red-l</div>
|
|
<div class="orange-l">orange-l</div>
|
|
<div class="yellow-l">yellow-l</div>
|
|
<div class="green-l">green-l</div>
|
|
<div class="cyan-l">cyan-l</div>
|
|
<div class="blue-l">blue-l</div>
|
|
<div class="violet-l">violet-l</div>
|
|
</div>
|
|
<div class="light">
|
|
<div class="base03">base03</div>
|
|
<div class="base02">base02</div>
|
|
<div class="base01">base01</div>
|
|
<div class="base00">base00</div>
|
|
<div class="base0">base0</div>
|
|
<div class="base1">base1</div>
|
|
<div class="base2">base2</div>
|
|
<div class="base3">base3</div>
|
|
<div class="magenta">magenta</div>
|
|
<div class="red">red</div>
|
|
<div class="orange">orange</div>
|
|
<div class="yellow">yellow</div>
|
|
<div class="green">green</div>
|
|
<div class="cyan">cyan</div>
|
|
<div class="blue">blue</div>
|
|
<div class="violet">violet</div>
|
|
<div class="magenta-d">magenta-d</div>
|
|
<div class="red-d">red-d</div>
|
|
<div class="orange-d">orange-d</div>
|
|
<div class="yellow-d">yellow-d</div>
|
|
<div class="green-d">green-d</div>
|
|
<div class="cyan-d">cyan-d</div>
|
|
<div class="blue-d">blue-d</div>
|
|
<div class="violet-d">violet-d</div>
|
|
<div class="magenta-l">magenta-l</div>
|
|
<div class="red-l">red-l</div>
|
|
<div class="orange-l">orange-l</div>
|
|
<div class="yellow-l">yellow-l</div>
|
|
<div class="green-l">green-l</div>
|
|
<div class="cyan-l">cyan-l</div>
|
|
<div class="blue-l">blue-l</div>
|
|
<div class="violet-l">violet-l</div>
|
|
</div>
|
|
</body>
|
|
</html>
|