purple/pisces.css at master · p9e/purple · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
:any-link {
  background-color: transparent;
  color: inherit;
}

/*
opensource mixturing
https://webmural.com
*/

:root {
  --pulp: rgb(180, 90, 240);
  --plur: rgb(150, 108, 333);
  --pynk: rgb(240, 120, 330);
  --punk: rgb(270, 120, 330);
  --pluw: plum;
  --kink: rgb(120, 100, 300);
  --ooze: rgb(210, 210, 210);
	--xxze: rgb(30, 10, 20);
	--oooo: var(--ooze);
	--xxxx: var(--xxze);
}

@media (prefers-contrast: more) {
  :root {
    --pulp: rgb(230, 130, 300);
    --plur: rgb(180, 144, 333);
    --kink: rgb(160, 160, 300);
  }
}

.xxze.xxze {
  --oooo: var(--xxze);
  --xxxx: var(--ooze);
  background-color: var(--xxze);
  color: var(--ooze);
}

.ooze.ooze {
  --oooo: var(--ooze);
  --xxxx: var(--xxze);
  background-color: var(--ooze);
  color: var(--xxze);
}

@media (prefers-color-scheme: dark) {
  .xxze.ooze {
    --oooo: var(--xxze);
    --xxxx: var(--ooze);
    background-color: var(--xxze);
    color: var(--ooze);
  }
}

.oooo {
  text-shadow:
    0 2ex 1pc var(--oooo),
    0 3ex 1pc var(--oooo),
    0 2em 1pc var(--oooo);
}

::selection {
	background: var(--xxxx);
  color: var(--oooo);
}

.heat { --ooze: var(--heat) }
.bath { --ooze: var(--bath) }
.nemo { --ooze: var(--nemo) }
.jupe { --ooze: var(--jupe) }
.volt { --ooze: var(--volt) }
.lawn { --ooze: var(--lawn) }
.moss { --ooze: var(--moss) }
.wind { --ooze: var(--wind) }
.teal { --ooze: var(--teal) }
.rain { --ooze: var(--rain) }
.pour { --ooze: var(--pour) }
.plur { --ooze: var(--plur) }
.pulp { --ooze: var(--pulp) }
.pynk { --ooze: var(--pynk) }
.punk { --ooze: var(--punk) }
.pluw { --ooze: var(--pluw) }
.kink { --ooze: var(--kink) }

[href] {
  color: inherit;
  background-color: transparent;
}

:focus {
  outline: thick groove;
  box-shadow: 0 0 .8ex .8ex var(--xxxx, plum);
}

@media (prefers-color-scheme: light) {
  .spectre {
    background-image: linear-gradient(
      var(--pulp),
      var(--plur),
      var(--kink),
      var(--plur)
    );
  }
}

@media (prefers-color-scheme: dark) {
  .spectre {
    text-shadow: 0 0 1ex;
  }
}