1
0
forked from clan/clan-core
clan-core/pkgs/theme/index.html

1083 lines
22 KiB
HTML

<!doctype html>
<html lang="en">
<meta charset="UTF-8" />
<title>Page Title</title>
<style></style>
<body>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral0
</div>
<div
style="
background-color: #070808;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral2
</div>
<div
style="
background-color: #101111;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral5
</div>
<div
style="
background-color: #171818;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral8
</div>
<div
style="
background-color: #1b1c1c;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral10
</div>
<div
style="
background-color: #303031;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral20
</div>
<div
style="
background-color: #464747;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral30
</div>
<div
style="
background-color: #5e5e5e;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral40
</div>
<div
style="
background-color: #777777;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral50
</div>
<div
style="
background-color: #808080;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral54
</div>
<div
style="
background-color: #919190;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral60
</div>
<div
style="
background-color: #ababab;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral70
</div>
<div
style="
background-color: #c7c6c6;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral80
</div>
<div
style="
background-color: #e3e2e2;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral90
</div>
<div
style="
background-color: #e9e8e8;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral92
</div>
<div
style="
background-color: #f2f0f0;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral95
</div>
<div
style="
background-color: #faf9f9;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
neutral100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green0
</div>
<div
style="
background-color: #030900;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green2
</div>
<div
style="
background-color: #0f2000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green10
</div>
<div
style="
background-color: #1d3700;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green20
</div>
<div
style="
background-color: #2d5000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green30
</div>
<div
style="
background-color: #3d6a00;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green40
</div>
<div
style="
background-color: #4e8500;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green50
</div>
<div
style="
background-color: #60a100;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green60
</div>
<div
style="
background-color: #74be11;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green70
</div>
<div
style="
background-color: #7ac51b;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green72
</div>
<div
style="
background-color: #8edb34;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green80
</div>
<div
style="
background-color: #a9f850;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green90
</div>
<div
style="
background-color: #efffd8;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
green100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow0
</div>
<div
style="
background-color: #080800;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow2
</div>
<div
style="
background-color: #1d1d00;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow10
</div>
<div
style="
background-color: #323200;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow20
</div>
<div
style="
background-color: #494900;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow30
</div>
<div
style="
background-color: #626200;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow40
</div>
<div
style="
background-color: #7b7b00;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow50
</div>
<div
style="
background-color: #969600;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow60
</div>
<div
style="
background-color: #b1b100;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow70
</div>
<div
style="
background-color: #cdcd00;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow80
</div>
<div
style="
background-color: #e0e01f;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow87
</div>
<div
style="
background-color: #eaea2c;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow90
</div>
<div
style="
background-color: #fffeac;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
yellow100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple0
</div>
<div
style="
background-color: #0d0025;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple2
</div>
<div
style="
background-color: #270057;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple10
</div>
<div
style="
background-color: #42008a;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple20
</div>
<div
style="
background-color: #5e07bd;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple30
</div>
<div
style="
background-color: #661bc5;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple33
</div>
<div
style="
background-color: #7734d6;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple40
</div>
<div
style="
background-color: #9152f1;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple50
</div>
<div
style="
background-color: #a974ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple60
</div>
<div
style="
background-color: #bf98ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple70
</div>
<div
style="
background-color: #d5baff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple80
</div>
<div
style="
background-color: #ecdcff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple90
</div>
<div
style="
background-color: #fef7ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple98
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
purple100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red0
</div>
<div
style="
background-color: #410006;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red10
</div>
<div
style="
background-color: #680010;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red20
</div>
<div
style="
background-color: #93001a;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red30
</div>
<div
style="
background-color: #bf0026;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red40
</div>
<div
style="
background-color: #e82439;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red50
</div>
<div
style="
background-color: #ff5358;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red60
</div>
<div
style="
background-color: #ff8986;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red70
</div>
<div
style="
background-color: #ffb3b0;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red80
</div>
<div
style="
background-color: #ffdad8;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red90
</div>
<div
style="
background-color: #ffedeb;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red95
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
red100
</div>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(13, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1rem;
"
>
<div
style="
background-color: #000000;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue0
</div>
<div
style="
background-color: #001224;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue5
</div>
<div
style="
background-color: #001d36;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue10
</div>
<div
style="
background-color: #003258;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue20
</div>
<div
style="
background-color: #00497c;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue30
</div>
<div
style="
background-color: #0061a3;
color: #fff;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue40
</div>
<div
style="
background-color: #1b7ac5;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue50
</div>
<div
style="
background-color: #4395e2;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue60
</div>
<div
style="
background-color: #62b0fe;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue70
</div>
<div
style="
background-color: #9ecaff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue80
</div>
<div
style="
background-color: #d1e4ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue90
</div>
<div
style="
background-color: #e9f1ff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue95
</div>
<div
style="
background-color: #ffffff;
color: #000;
height: 10rem;
border: solid 1px grey;
display: grid;
place-items: end;
"
>
blue100
</div>
</div>
</body>
</html>