image-compressor/index.css at main · Sethispr/image-compressor · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* ── Self-hosted fonts ──────────────────────────────────────────── */

/* Fredoka — variable weight 300-600 */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/Fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/Fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/Fredoka-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC,
    U+FB1D-FB4F;
}

/* Outfit — variable weight 300-800 */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./assets/fonts/Outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("./assets/fonts/Outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Tailwind v4 theme ──────────────────────────────────────────── */

@theme {
  --color-gleam-pink: #ffaff3;
  --color-gleam-dark: #292d3e;
  --color-gleam-cream: #fff9f5;
  --color-gleam-purple: #5e5086;
  --color-gleam-charcoal: #222222;

  --color-dark-bg: #0f172a;
  --color-dark-card: #1e293b;
  --color-dark-border: #334155;
  --color-dark-text: #f1f5f9;
  --color-dark-muted: #94a3b8;

  --font-sans: "Fredoka", "Outfit", sans-serif;
  --font-display: "Outfit", sans-serif;
  --font-mono: "Courier New", monospace;

  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;

  --animate-bounce-slow: bounce 3s infinite;
  --animate-spin-slow: spin 3s linear infinite;
  --animate-progress-simulate: progressSim 4s ease-out forwards;

  @keyframes progressSim {
    0% {
      transform: scaleX(0.15);
    }
    50% {
      transform: scaleX(0.7);
    }
    100% {
      transform: scaleX(0.92);
    }
  }
}

/* ── Base styles ────────────────────────────────────────────────── */

body {
  background-color: #fff9f5;
  color: #292d3e;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.dark body {
  background-color: #020617;
  color: #f1f5f9;
}

.bg-rainbow-gradient {
  background: linear-gradient(
    135deg,
    #ffaff3 0%,
    #ffcba4 20%,
    #fffeb0 40%,
    #c1ffc1 60%,
    #c1f0ff 80%,
    #e0c1ff 100%
  );
  background-attachment: fixed;
}

/* ── Job queue scrollable area ──────────────────────────────────── */

.job-queue-scroll {
  scrollbar-width: thin;
  scrollbar-color: #ffaff3 transparent;
}
.job-queue-scroll::-webkit-scrollbar {
  width: 6px;
}
.job-queue-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.job-queue-scroll::-webkit-scrollbar-thumb {
  background: #ffaff3;
  border-radius: 3px;
}
.dark .job-queue-scroll {
  scrollbar-color: #4c1d95 transparent;
}
.dark .job-queue-scroll::-webkit-scrollbar-thumb {
  background: #4c1d95;
}

/* ── Focus styles ───────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid #292d3e;
  outline-offset: 2px;
}
.dark :focus-visible {
  outline: 2px solid #ffaff3;
}