Santhosh Janardhanan
0cf703ccd9
- Fix app.html: was malformed with duplicate <head> tags (first one never closed) - Move Inter font from CSS @import to <link> in app.html with preconnect for faster loading - Add global resets for select, input, textarea, button elements - Add custom range slider styling (cross-browser webkit + moz) - Add custom select dropdown arrow via SVG background-image - Remove conflicting scoped slider styles from +page.svelte
75 lines
1.6 KiB
CSS
75 lines
1.6 KiB
CSS
:global(body) {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #f9fafb;
|
|
color: #1f2937;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
:global(*),
|
|
:global(*::before),
|
|
:global(*::after) {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:global(h1, h2, h3, h4, h5, h6, p) {
|
|
margin: 0;
|
|
}
|
|
|
|
:global(button, input, select, textarea) {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
:global(select) {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
:global(input[type='range']) {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
:global(input[type='range']::-webkit-slider-runnable-track) {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
:global(input[type='range']::-webkit-slider-thumb) {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
border: 2px solid #ffffff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
margin-top: -7px;
|
|
}
|
|
|
|
:global(input[type='range']::-moz-range-track) {
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
:global(input[type='range']::-moz-range-thumb) {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
border: 2px solid #ffffff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
} |