apps/shrink/static/styles.css 2.9 K raw
1
/* shrink — app-specific styles.
2
 * Shared reset / tokens / components come from /assets/darkmatter.css.
3
 */
4
5
/* Drop Zone */
6
#drop-zone {
7
    border: 1px solid rgba(255, 255, 255, 0.3);
8
    padding: 3rem 2rem;
9
    text-align: center;
10
    cursor: pointer;
11
    display: flex;
12
    align-items: center;
13
    justify-content: center;
14
    min-height: 150px;
15
    transition: border-color 0.15s;
16
}
17
18
#drop-zone:hover,
19
#drop-zone.drag-over {
20
    border-color: #ffffff;
21
}
22
23
#drop-zone p {
24
    opacity: 0.5;
25
    font-size: 14px;
26
    text-transform: uppercase;
27
    letter-spacing: 0.1em;
28
}
29
30
/* Preview */
31
#preview-section {
32
    display: none;
33
    flex-direction: column;
34
    gap: 0.5rem;
35
}
36
37
#preview-section.visible {
38
    display: flex;
39
}
40
41
#preview-img {
42
    max-width: 100%;
43
    max-height: 300px;
44
    object-fit: contain;
45
    border: 1px solid #333;
46
}
47
48
#original-size {
49
    opacity: 0.7;
50
    font-size: 12px;
51
    text-transform: uppercase;
52
}
53
54
/* Controls */
55
#controls {
56
    display: none;
57
    flex-direction: column;
58
    gap: 1rem;
59
}
60
61
#controls.visible {
62
    display: flex;
63
}
64
65
.control-row {
66
    display: flex;
67
    align-items: center;
68
    gap: 1rem;
69
}
70
71
.control-row label {
72
    font-size: 12px;
73
    opacity: 0.7;
74
    text-transform: uppercase;
75
    min-width: 80px;
76
}
77
78
#quality-value {
79
    font-size: 14px;
80
    min-width: 2.5em;
81
    text-align: right;
82
}
83
84
/* Number Inputs */
85
input[type="number"] {
86
    width: 90px;
87
    -moz-appearance: textfield;
88
}
89
90
input[type="number"]::-webkit-inner-spin-button,
91
input[type="number"]::-webkit-outer-spin-button {
92
    -webkit-appearance: none;
93
}
94
95
.dimension-sep {
96
    opacity: 0.5;
97
}
98
99
#height-display {
100
    opacity: 0.7;
101
    min-width: 4em;
102
}
103
104
/* Range Input */
105
input[type="range"] {
106
    -webkit-appearance: none;
107
    appearance: none;
108
    flex: 1;
109
    height: 1px;
110
    background: rgba(255, 255, 255, 0.3);
111
    outline: none;
112
    border-radius: 0;
113
}
114
115
input[type="range"]::-webkit-slider-thumb {
116
    -webkit-appearance: none;
117
    appearance: none;
118
    width: 14px;
119
    height: 14px;
120
    background: #ffffff;
121
    border: none;
122
    border-radius: 0;
123
    cursor: pointer;
124
}
125
126
input[type="range"]::-moz-range-thumb {
127
    width: 14px;
128
    height: 14px;
129
    background: #ffffff;
130
    border: none;
131
    border-radius: 0;
132
    cursor: pointer;
133
}
134
135
input[type="range"].disabled {
136
    opacity: 0.3;
137
}
138
139
/* Results */
140
#result-section {
141
    display: none;
142
    flex-direction: column;
143
    gap: 1.5rem;
144
    padding-top: 1.5rem;
145
    border-top: 1px solid #333;
146
}
147
148
#result-section.visible {
149
    display: flex;
150
}
151
152
.size-comparison {
153
    display: flex;
154
    gap: 2rem;
155
}
156
157
.size-comparison label {
158
    font-size: 12px;
159
    opacity: 0.5;
160
    text-transform: uppercase;
161
    display: block;
162
    margin-bottom: 0.25rem;
163
}
164
165
.size-comparison p {
166
    font-size: 16px;
167
}
168
169
#download-link {
170
    text-decoration: none;
171
    align-self: flex-start;
172
}
173
174
button {
175
    text-transform: uppercase;
176
    letter-spacing: 0.05em;
177
    padding: 0.6rem 1.5rem;
178
}
179
180
button:disabled {
181
    opacity: 0.3;
182
    cursor: default;
183
}