This repository has been archived by the owner on Sep 29, 2023. It is now read-only.
forked from dom111/flow-free
-
Notifications
You must be signed in to change notification settings - Fork 0
/
flow.css
69 lines (57 loc) · 3.98 KB
/
flow.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
body { margin: 0; padding: 0; background: #000; }
.grid { width: 100vmin; height: 100vmin; overflow: hidden; background: black; position: absolute; top: 50vh; margin-top: -50vmin; left: 50vw; margin-left: -50vmin; border: 1px solid #7F7042; box-sizing: border-box; }
.grid > div { box-sizing: border-box; float: left; border: 1px solid #7F7042; position: relative; background-image: radial-gradient(ellipse at center, transparent 0%, transparent 20.5%, #000 21.484374%); height: calc(100% / var(--size)); width: calc(100% / var(--size)); }
.grid > div[data-completed="true"] { background-image: radial-gradient(ellipse at center, transparent 0%, transparent 20.5%, rgba(0, 0, 0, .8) 21.484374%); }
.grid[data-size="2"] > div { --size: 2; }
.grid[data-size="3"] > div { --size: 3; }
.grid[data-size="4"] > div { --size: 4; }
.grid[data-size="5"] > div { --size: 5; }
.grid[data-size="6"] > div { --size: 6; }
.grid[data-size="7"] > div { --size: 7; }
.grid[data-size="8"] > div { --size: 8; }
.grid[data-size="9"] > div { --size: 9; }
.grid[data-size="10"] > div { --size: 10; }
.grid[data-size="11"] > div { --size: 11; }
.grid[data-size="12"] > div { --size: 12; }
.grid[data-size="13"] > div { --size: 13; }
.grid[data-size="14"] > div { --size: 14; }
.grid[data-size="15"] > div { --size: 15; }
.grid[data-size="16"] > div { --size: 16; }
.grid[data-size="17"] > div { --size: 17; }
.grid[data-size="18"] > div { --size: 18; }
.grid[data-size="19"] > div { --size: 19; }
.grid[data-size="20"] > div { --size: 20; }
.grid > div[data-point="true"] { background-image: radial-gradient(ellipse at center, transparent 0%, transparent 49.5%, #000 50%); }
.grid > div[data-point="true"][data-completed="true"] { background-image: radial-gradient(ellipse at center, transparent 0%, transparent 49.5%, rgba(0, 0, 0, .8) 50%); }
.grid > div:after,
.grid > div:before { content: ''; background-color: inherit; display: block; position: absolute; }
.grid > div[data-t]:before { width: 30%; height: 50%; left: 35%; top: -1px; }
.grid > div[data-b]:before { width: 30%; height: 50%; left: 35%; bottom: -1px; }
.grid > div[data-l]:before { width: 50%; height: 30%; left: -1px; top: 35%; }
.grid > div[data-r]:before { width: 50%; height: 30%; right: -1px; top: 35%; }
.grid > div[data-t][data-b]:before { width: 30%; height: calc(100% + 2px); left: 35%; top: -1px; }
.grid > div[data-l][data-r]:before { width: calc(100% + 2px); height: 30%; left: -1px; top: 35%; }
.grid > div[data-t][data-l]:before { width: 30%; height: 50%; left: 35%; top: -1px; }
.grid > div[data-t][data-l]:after { width: 50%; height: 30%; left: -1px; top: 35%; }
.grid > div[data-t][data-r]:before { width: 30%; height: 50%; left: 35%; top: -1px; }
.grid > div[data-t][data-r]:after { width: 50%; height: 30%; right: -1px; top: 35%; }
.grid > div[data-b][data-l]:before { width: 30%; height: 50%; left: 35%; top: auto; bottom: -1px; }
.grid > div[data-b][data-l]:after { width: 50%; height: 30%; left: -1px; top: 35%; }
.grid > div[data-b][data-r]:before { width: 30%; height: 50%; left: 35%; top: auto; bottom: -1px; }
.grid > div[data-b][data-r]:after { width: 50%; height: 30%; right: -1px; top: 35%; }
.grid > div[data-id="1"] { background-color: #fc0d1b; }
.grid > div[data-id="2"] { background-color: #0f7f12; }
.grid > div[data-id="3"] { background-color: #0b24fb; }
.grid > div[data-id="4"] { background-color: #eeec33; }
.grid > div[data-id="5"] { background-color: #fd7f23; }
.grid > div[data-id="6"] { background-color: #2dfffe; }
.grid > div[data-id="7"] { background-color: #fc28fc; }
.grid > div[data-id="8"] { background-color: #a32b2e; }
.grid > div[data-id="9"] { background-color: #7f0f7e; }
.grid > div[data-id="10"] { background-color: #fff; }
.grid > div[data-id="11"] { background-color: #a6a6a6; }
.grid > div[data-id="12"] { background-color: #29fd2f; }
.grid > div[data-id="13"] { background-color: #bdb66f; }
.grid > div[data-id="14"] { background-color: #030e88; }
.grid > div[data-id="15"] { background-color: #11807f; }
.grid > div[data-id="16"] { background-color: #fc2293; }