iqe/src/nodejs/style.css at master · JohnnyMarnell/iqe · 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
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    body {
        @apply touch-pan-y p-1 w-full;
    }
    .row {
        @apply space-x-1 space-y-2 w-full;
    }
    .button {
        @apply bg-blue-500 text-white font-bold py-1 px-2 rounded;
        @apply active:bg-blue-700;
    }
    .selected {
        @apply border-pink-400 border-solid border-2 rounded;
    }
    .text {
        @apply outline p-0.5;
    }
    .title {
        @apply font-bold;
    }
    .slider {
        @apply w-64 py-4 scale-y-150 translate-x-8;
    }
    .slider.vertical {
        /* @apply rotate-90; */
    }
    .section {
        @apply text-3xl;
    }

    /* todo, these should be tailwindified? barf */
    /* todo the xy controller I took from https://github.com/madsstoumann */
    .xy {
        --bgc: #333;
        --size: 15rem;
        --xybdc: rgba(136, 136, 136, .5);
        --xybdw: 8px;
        --xybgc: rgb(245, 230, 99);
        --xysize: 4rem;
        background-color:var(--bgc);
        block-size: var(--size);
        border: 0;
        inline-size: var(--size);
        overflow: hidden;
        padding: 0;
        touch-action: none;
      }
      .xy * {
        background-color: var(--xybgc);
        block-size: var(--xysize);
        border: var(--xybdw) solid var(--xybdc);
        border-radius: var(--xybdrs, 50%);
        inline-size: var(--xysize);
        touch-action: none;
        user-select: none;
      }
      .xy *:active {
        background-color: rgba(168, 218, 220, 1.00);
      }
}