diff-viewer/web/src/app.css at f28e428bafc1fca4e606b9e05dd15113dad2b01a · PaperMC/diff-viewer · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
@import "tailwindcss";

@plugin "@iconify/tailwind4" {
    prefixes: octicon;
}

@custom-variant dark {
    /* Enable dark mode when data-theme attribute = dark */
    &:where([data-theme="dark"], [data-theme="dark"] *) {
        @slot;
    }
    /* Enable dark mode when data-theme attribute = auto and prefers-color-scheme is dark */
    @media (prefers-color-scheme: dark) {
        &:where([data-theme="auto"], [data-theme="auto"] *) {
            @slot;
        }
    }
}

@theme {
    --color-primary: var(--color-blue-500);

    /* Text colors */
    --color-em-high-light: rgba(0, 0, 0, 0.87);
    --color-em-high-dark: rgba(255, 255, 255, 0.87);
    --color-em-high: var(--color-em-high-light);

    --color-em-med-light: rgba(0, 0, 0, 0.6);
    --color-em-med-dark: rgba(255, 255, 255, 0.6);
    --color-em-med: var(--color-em-med-light);

    --color-em-disabled-light: rgba(0, 0, 0, 0.38);
    --color-em-disabled-dark: rgba(255, 255, 255, 0.38);
    --color-em-disabled: var(--color-em-disabled-light);

    /* Bg colors */
    --color-neutral-light: var(--color-white);
    --color-neutral-dark: var(--color-neutral-900);
    --color-neutral: var(--color-neutral-light);
    --color-neutral-light-2: var(--color-neutral-100);
    --color-neutral-dark-2: var(--color-neutral-800);
    --color-neutral-2: var(--color-neutral-light-2);
    --color-neutral-light-3: var(--color-neutral-200);
    --color-neutral-dark-3: var(--color-neutral-700);
    --color-neutral-3: var(--color-neutral-light-3);

    /* Border colors */
    --color-edge-light: rgba(0, 0, 0, 0.2);
    --color-edge-dark: rgba(255, 255, 255, 0.2);
    --color-edge: var(--color-edge-light);
}

@layer base {
    @variant dark {
        --color-em-high: var(--color-em-high-dark);
        --color-em-med: var(--color-em-med-dark);
        --color-em-disabled: var(--color-em-disabled-dark);

        --color-neutral: var(--color-neutral-dark);
        --color-neutral-2: var(--color-neutral-dark-2);
        --color-neutral-3: var(--color-neutral-dark-3);

        --color-edge: var(--color-edge-dark);
    }
    html {
        color: var(--color-em-high);

        @apply dark:[color-scheme:dark];
    }
    * {
        border-color: var(--color-edge);
    }
    textarea {
        vertical-align: bottom;
    }
}

@utility btn-ghost-hover {
    @apply bg-neutral-300/80 dark:bg-neutral-700/80;
}
@utility btn-ghost-active {
    @apply bg-neutral-400/80 dark:bg-neutral-600/80;
}
@utility btn-ghost {
    &:hover {
        @apply btn-ghost-hover;
    }
    &:active {
        @apply btn-ghost-active;
    }
    @apply transition-colors duration-100 ease-in-out;
}
@utility btn-ghost-visible {
    @apply btn-ghost-hover;
    &:active {
        @apply btn-ghost-active;
    }
}

@utility btn-primary-hover {
    @apply bg-blue-600;
}
@utility btn-primary {
    @apply bg-primary text-white;
    &:hover {
        @apply btn-primary-hover;
    }
    &:active {
        @apply bg-blue-700;
    }
    @apply transition-colors duration-100 ease-in-out;
}

@utility btn-danger {
    @apply bg-red-500 text-white;
    &:hover {
        @apply bg-red-600;
    }
    &:active {
        @apply bg-red-700;
    }
}

.png-bg {
    background: url("/png.gif") right bottom var(--color-gray-300);
}