codeenplace.dev/light.color.css at main · CodeEnPlace/codeenplace.dev · 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
:root {
  --col-bg: oklch(97.35% 0.026 90.12);
  --col-bright-bg: oklch(100% 0.039 90.12);
  --col-fg: oklch(56.82% 0.0285 221.97);
  --col-bright-fg: oklch(51.82% 0.0428 221.97);
  --col-cursor: oklch(52.3% 0.0283 219.2);
  --col-black: oklch(30.92% 0.0518 219.68);
  --col-red: oklch(58.63% 0.2064 27.11);
  --col-green: oklch(64.44% 0.1508 118.61);
  --col-yellow: oklch(65.45% 0.134 85.72);
  --col-blue: oklch(61.49% 0.1395 244.94);
  --col-purple: oklch(58.23% 0.1262 279.1);
  --col-orange: oklch(58.08% 0.1732 39.49);
  --col-cyan: oklch(64.37% 0.1019 187.42);
  --col-white: oklch(93.06% 0.026 92.43);
  --col-bright-black: oklch(26.73% 0.0486 219.84);
  --col-bright-red: oklch(58.08% 0.1732 39.49);
  --col-bright-green: oklch(52.3% 0.0283 219.2);
  --col-bright-yellow: oklch(56.82% 0.0285 221.97);
  --col-bright-blue: oklch(65.37% 0.0198 205.4);
  --col-bright-purple: oklch(58.23% 0.1262 279.1);
  --col-bright-cyan: oklch(69.79% 0.0159 197);
  --col-bright-white: oklch(97.35% 0.026 90.12);
}

retro-board {
  background-color: oklch(0.9 0.02 240);
  background-image: radial-gradient(oklch(0.5 0.03 240), 1px, transparent 0);
  box-shadow:
    oklch(0 0 250 / 0.16) 0px 10px 36px 0px,
    oklch(0 0 250 / 0.06) 0px 0px 0px 1px;

  label {
    background: oklch(0.9 0.02 240 / 0.7);
  }

  card {
    background-color: oklch(0.9823 0.0756 109);
    color: oklch(0.3 0.1 250);

    box-shadow:
      oklch(0.5 0.1 109 / 0.4) 0px 2px 4px,
      oklch(0.5 0.1 109 / 0.3) 0px 7px 13px -3px,
      oklch(0.5 0.1 109 / 0.2) 0px -3px 0px inset;

    reaction {
      text-shadow: oklch(0 0 250 / 0.4) 0px 2px 4px;
    }
  }
}