+1 -1

.markdownlint.jsonc

reviewed

··· 1 1 { 2 2 "MD013": false, // line length 3 3 - "MD010": false // hard tabs 3 3 + "MD010": false, // hard tabs 4 4 }

+4 -5

COMMENTS.md

reviewed

··· 5 5 Here's a set of VSCode RegEx patterns to fix comment case. Keep in mind that these patterns are not perfect and may require you to exclude certain files manually (deno.lock comes to mind) 6 6 7 7 1. Make comment lowercase: 8 8 - 9 9 - - Find: `([^\S\r\n]+)//([^\S\r\n]*)([A-Z])` 10 10 - - Replace: `$1//$2\l$3` 8 8 + - Find: `([^\S\r\n]+)//([^\S\r\n]*)([A-Z])` 9 9 + - Replace: `$1//$2\l$3` 11 10 12 11 2. Fix inconsistencies (the above RegEx would change "DOM" to "dOM", this fixes that): 13 13 - - Find: `([^\S\r\n]+)//([^\S\r\n]*)([a-z])([A-Z])` 14 14 - - Replace: `$1//$2\u$3$4` 12 12 + - Find: `([^\S\r\n]+)//([^\S\r\n]*)([a-z])([A-Z])` 13 13 + - Replace: `$1//$2\u$3$4`

+144 -148

README.md

reviewed

··· 20 20 21 21 - **Access**: Navigate to `/admin.html` or click the "Admin Dashboard" link on the main page 22 22 - **Features**: 23 23 - - View all levels with pagination 24 24 - - Search levels by name, author, or ID 25 25 - - Edit level properties (name, author, sun, water status, difficulty, statistics) 26 26 - - Delete levels (including related files and database entries) 27 27 - > Authentication: The admin UI supports optional GitHub OAuth. If `USE_GITHUB_AUTH=true`, users must sign in with GitHub and be included in `GITHUB_ALLOWED_USERS` to access admin endpoints. If `USE_GITHUB_AUTH=false`, the admin endpoints are not protected (not recommended in production). 28 28 - > The admin dashboard also supports one-time-token links for a single edit/delete action: 29 29 - - Edit: `/admin.html?token=...&action=edit&level=123` 30 30 - - Delete: `/admin.html?token=...&action=delete&level=123` 31 31 - After a successful token-based edit/delete, the page attempts to call `window.close()` (some browsers only allow this for windows opened by script). 23 23 + - View all levels with pagination 24 24 + - Search levels by name, author, or ID 25 25 + - Edit level properties (name, author, sun, water status, difficulty, statistics) 26 26 + - Delete levels (including related files and database entries) 27 27 + > Authentication: The admin UI supports optional GitHub OAuth. If `USE_GITHUB_AUTH=true`, users must sign in with GitHub and be included in `GITHUB_ALLOWED_USERS` to access admin endpoints. If `USE_GITHUB_AUTH=false`, the admin endpoints are not protected (not recommended in production). 28 28 + > The admin dashboard also supports one-time-token links for a single edit/delete action: 29 29 + - Edit: `/admin.html?token=...&action=edit&level=123` 30 30 + - Delete: `/admin.html?token=...&action=delete&level=123` 31 31 + After a successful token-based edit/delete, the page attempts to call `window.close()` (some browsers only allow this for windows opened by script). 32 32 33 33 ## Getting Started 34 34 ··· 83 83 - **URL:** `/api/levels` 84 84 - **Method:** `POST` 85 85 - **Content Types:** 86 86 - - `application/octet-stream` 86 86 + - `application/octet-stream` 87 87 - **URL Params:** None 88 88 - **Query Params:** (for octet-stream) 89 89 - - `author`: Author name 90 90 - - `turnstileResponse`: Captcha verification token (if enabled) 89 89 + - `author`: Author name 90 90 + - `turnstileResponse`: Captcha verification token (if enabled) 91 91 - **Notes:** Only IZL3 is supported (v2 is deprecated). 92 92 - **Request Body:** Raw binary level data (`.izl3`), sent as the request body. 93 93 - **Success Response:** 94 94 + - **Code:** 201 95 95 + - **Content:** 94 96 95 95 - - **Code:** 201 96 96 - - **Content:** 97 97 + ```json 98 98 + { 99 99 + "id": 123, 100 100 + "name": "Level Name", 101 101 + "author": "Author Name", 102 102 + "created_at": 1714680000, 103 103 + "sun": 100, 104 104 + "is_water": true, 105 105 + "version": 3 106 106 + } 107 107 + ``` 97 108 98 98 - ```json 99 99 - { 100 100 - "id": 123, 101 101 - "name": "Level Name", 102 102 - "author": "Author Name", 103 103 - "created_at": 1714680000, 104 104 - "sun": 100, 105 105 - "is_water": true, 106 106 - "version": 3 107 107 - } 108 108 - ``` 109 109 - 110 110 - Note: `is_water` is stored as `0/1` in the database and is returned as `0/1` in list/detail endpoints. 109 109 + Note: `is_water` is stored as `0/1` in the database and is returned as `0/1` in list/detail endpoints. 111 110 112 111 - **Error Responses:** 113 113 - - **Code:** 400 114 114 - - **Content:** `{ "error": "Missing required fields" }` 115 115 - - **Code:** 400 116 116 - - **Content:** `{ "error": "Content contains inappropriate language or content" }` 117 117 - - **Code:** 400 118 118 - - **Content:** `{ "error": "Captcha verification required" }` 119 119 - - **Code:** 400 120 120 - - **Content:** `{ "error": "Invalid captcha" }` 121 121 - - **Code:** 500 122 122 - - **Content:** `{ "error": "Failed to upload level" }` 112 112 + - **Code:** 400 113 113 + - **Content:** `{ "error": "Missing required fields" }` 114 114 + - **Code:** 400 115 115 + - **Content:** `{ "error": "Content contains inappropriate language or content" }` 116 116 + - **Code:** 400 117 117 + - **Content:** `{ "error": "Captcha verification required" }` 118 118 + - **Code:** 400 119 119 + - **Content:** `{ "error": "Invalid captcha" }` 120 120 + - **Code:** 500 121 121 + - **Content:** `{ "error": "Failed to upload level" }` 123 122 124 123 ##### List Levels 125 124 ··· 127 126 - **Method:** `GET` 128 127 - **URL Params:** None 129 128 - **Query Params:** 130 130 - - `page`: Page number (default: 1) 131 131 - - `limit`: Results per page (default: 10) 132 132 - - `author`: Filter by author name (partial match) 133 133 - - `is_water`: Filter by water levels ("true"/"false") 134 134 - - `version`: Filter by level version (currently always `3`; reserved for future versions) 135 135 - - `sort`: Sorting mode. Default is by play count (`plays`). Use `recent` to sort by creation time (`created_at`) and `favorites` to sort by favorite count. 136 136 - - `reversed_order`: Reverse the sort order (`true` or `1`). By default, sorting is descending. 137 137 - - `token`: One-time token. If provided and valid, the response is filtered to the single level associated with that token (and pagination becomes `page=1`, `limit=1`). If the token is invalid, the endpoint returns `401`. 129 129 + - `page`: Page number (default: 1) 130 130 + - `limit`: Results per page (default: 10) 131 131 + - `author`: Filter by author name (partial match) 132 132 + - `is_water`: Filter by water levels ("true"/"false") 133 133 + - `version`: Filter by level version (currently always `3`; reserved for future versions) 134 134 + - `sort`: Sorting mode. Default is by play count (`plays`). Use `recent` to sort by creation time (`created_at`) and `favorites` to sort by favorite count. 135 135 + - `reversed_order`: Reverse the sort order (`true` or `1`). By default, sorting is descending. 136 136 + - `token`: One-time token. If provided and valid, the response is filtered to the single level associated with that token (and pagination becomes `page=1`, `limit=1`). If the token is invalid, the endpoint returns `401`. 138 137 - **Success Response:** 138 138 + - **Code:** 200 139 139 + - **Content:** 139 140 140 140 - - **Code:** 200 141 141 - - **Content:** 142 142 - 143 143 - ```json 144 144 - { 145 145 - "levels": [ 146 146 - { 147 147 - "id": 123, 148 148 - "name": "Level Name", 149 149 - "author": "Author Name", 150 150 - "created_at": 1714680000, 151 151 - "sun": 100, 152 152 - "is_water": 1, 153 153 - "favorites": 5, 154 154 - "plays": 10, 155 155 - "difficulty": 7, 156 156 - "thumbnail": [[0, 10, 10, 40, 40, 1]], 157 157 - "version": 3 158 158 - } 159 159 - ], 160 160 - "pagination": { 161 161 - "total": 50, 162 162 - "page": 1, 163 163 - "limit": 10, 164 164 - "pages": 5 165 165 - } 166 166 - } 167 167 - ``` 141 141 + ```json 142 142 + { 143 143 + "levels": [ 144 144 + { 145 145 + "id": 123, 146 146 + "name": "Level Name", 147 147 + "author": "Author Name", 148 148 + "created_at": 1714680000, 149 149 + "sun": 100, 150 150 + "is_water": 1, 151 151 + "favorites": 5, 152 152 + "plays": 10, 153 153 + "difficulty": 7, 154 154 + "thumbnail": [[0, 10, 10, 40, 40, 1]], 155 155 + "version": 3 156 156 + } 157 157 + ], 158 158 + "pagination": { 159 159 + "total": 50, 160 160 + "page": 1, 161 161 + "limit": 10, 162 162 + "pages": 5 163 163 + } 164 164 + } 165 165 + ``` 168 166 169 167 - **Error Response:** 170 170 - - **Code:** 401 171 171 - - **Content:** `{ "error": "Invalid token" }` 172 172 - - **Code:** 500 173 173 - - **Content:** `{ "error": "Failed to list levels" }` 168 168 + - **Code:** 401 169 169 + - **Content:** `{ "error": "Invalid token" }` 170 170 + - **Code:** 500 171 171 + - **Content:** `{ "error": "Failed to list levels" }` 174 172 175 173 ##### Get Level Details 176 174 177 175 - **URL:** `/api/levels/:id` 178 176 - **Method:** `GET` 179 177 - **URL Params:** 180 180 - - `id`: Level ID 178 178 + - `id`: Level ID 181 179 - **Success Response:** 180 180 + - **Code:** 200 181 181 + - **Content:** 182 182 183 183 - - **Code:** 200 184 184 - - **Content:** 185 185 - 186 186 - ```json 187 187 - { 188 188 - "id": 123, 189 189 - "name": "Level Name", 190 190 - "author": "Author Name", 191 191 - "created_at": 1714680000, 192 192 - "sun": 100, 193 193 - "is_water": 1, 194 194 - "favorites": 5, 195 195 - "plays": 10, 196 196 - "difficulty": 7, 197 197 - "thumbnail": null, 198 198 - "version": 3 199 199 - } 200 200 - ``` 183 183 + ```json 184 184 + { 185 185 + "id": 123, 186 186 + "name": "Level Name", 187 187 + "author": "Author Name", 188 188 + "created_at": 1714680000, 189 189 + "sun": 100, 190 190 + "is_water": 1, 191 191 + "favorites": 5, 192 192 + "plays": 10, 193 193 + "difficulty": 7, 194 194 + "thumbnail": null, 195 195 + "version": 3 196 196 + } 197 197 + ``` 201 198 202 199 - **Error Responses:** 203 203 - - **Code:** 400 204 204 - - **Content:** `{ "error": "Invalid level ID" }` 205 205 - - **Code:** 404 206 206 - - **Content:** `{ "error": "Level not found" }` 207 207 - - **Code:** 500 208 208 - - **Content:** `{ "error": "Failed to get level" }` 200 200 + - **Code:** 400 201 201 + - **Content:** `{ "error": "Invalid level ID" }` 202 202 + - **Code:** 404 203 203 + - **Content:** `{ "error": "Level not found" }` 204 204 + - **Code:** 500 205 205 + - **Content:** `{ "error": "Failed to get level" }` 209 206 210 207 ##### Download Level 211 208 212 209 - **URL:** `/api/levels/:id/download` 213 210 - **Method:** `GET` 214 211 - **URL Params:** 215 215 - - `id`: Level ID 212 212 + - `id`: Level ID 216 213 - **Success Response:** 217 217 - - **Code:** 200 218 218 - - **Content:** Binary file download with `.izl3` extension 214 214 + - **Code:** 200 215 215 + - **Content:** Binary file download with `.izl3` extension 219 216 - **Error Responses:** 220 220 - - **Code:** 400 221 221 - - **Content:** `{ "error": "Invalid level ID" }` 222 222 - - **Code:** 404 223 223 - - **Content:** `{ "error": "Level not found" }` or `{ "error": "Level file not found" }` 224 224 - - **Code:** 500 225 225 - - **Content:** `{ "error": "Failed to download level" }` 217 217 + - **Code:** 400 218 218 + - **Content:** `{ "error": "Invalid level ID" }` 219 219 + - **Code:** 404 220 220 + - **Content:** `{ "error": "Level not found" }` or `{ "error": "Level file not found" }` 221 221 + - **Code:** 500 222 222 + - **Content:** `{ "error": "Failed to download level" }` 226 223 227 224 #### Favorites 228 225 ··· 231 228 - **URL:** `/api/levels/:id/favorite` 232 229 - **Method:** `POST` 233 230 - **URL Params:** 234 234 - - `id`: Level ID 231 231 + - `id`: Level ID 235 232 - **Request Body:** None (this endpoint always toggles favorite on/off) 236 233 - **Success Response:** 237 237 - - **Code:** 200 238 238 - - **Content:** `{ "success": true, "level": { "id": 123, "favorites": 5, ... } }` 234 234 + - **Code:** 200 235 235 + - **Content:** `{ "success": true, "level": { "id": 123, "favorites": 5, ... } }` 239 236 - **Error Responses:** 240 240 - - **Code:** 400 241 241 - - **Content:** `{ "error": "Invalid level ID" }` 242 242 - - **Code:** 404 243 243 - - **Content:** `{ "error": "Level not found" }` 244 244 - - **Code:** 500 245 245 - - **Content:** `{ "error": "Failed to favorite level" }` 246 246 - Note: Captcha verification is not required for favoriting. 237 237 + - **Code:** 400 238 238 + - **Content:** `{ "error": "Invalid level ID" }` 239 239 + - **Code:** 404 240 240 + - **Content:** `{ "error": "Level not found" }` 241 241 + - **Code:** 500 242 242 + - **Content:** `{ "error": "Failed to favorite level" }` 243 243 + Note: Captcha verification is not required for favoriting. 247 244 248 245 #### Reporting 249 246 ··· 252 249 - **URL:** `/api/levels/:id/report` 253 250 - **Method:** `POST` 254 251 - **URL Params:** 255 255 - - `id`: Level ID 252 252 + - `id`: Level ID 256 253 - **Request Body:** 257 254 258 258 - ```json 259 259 - { 260 260 - "reason": "Brief description of the issue" 261 261 - } 262 262 - ``` 255 255 + ```json 256 256 + { 257 257 + "reason": "Brief description of the issue" 258 258 + } 259 259 + ``` 263 260 264 261 - **Behavior:** 265 265 - - If `USE_REPORTING=false`, this endpoint returns 404. 266 266 - - If `DISCORD_REPORT_WEBHOOK_URL` is configured, the server sends the report to the Discord webhook (and attaches the level file if available). 267 267 - - If no webhook is configured, the server still accepts the report and returns success. 262 262 + - If `USE_REPORTING=false`, this endpoint returns 404. 263 263 + - If `DISCORD_REPORT_WEBHOOK_URL` is configured, the server sends the report to the Discord webhook (and attaches the level file if available). 264 264 + - If no webhook is configured, the server still accepts the report and returns success. 268 265 - **Success Response:** 269 269 - - **Code:** 200 270 270 - - **Content:** `{ "success": true }` 266 266 + - **Code:** 200 267 267 + - **Content:** `{ "success": true }` 271 268 - **Error Responses:** 272 272 - - **Code:** 400 273 273 - - **Content:** `{ "error": "Invalid input" }` 274 274 - - **Code:** 404 275 275 - - **Content:** `{ "error": "Level not found" }` 276 276 - - **Code:** 500 277 277 - - **Content:** `{ "error": "Failed to report level" }` 269 269 + - **Code:** 400 270 270 + - **Content:** `{ "error": "Invalid input" }` 271 271 + - **Code:** 404 272 272 + - **Content:** `{ "error": "Level not found" }` 273 273 + - **Code:** 500 274 274 + - **Content:** `{ "error": "Failed to report level" }` 278 275 279 276 #### Configuration 280 277 ··· 283 280 - **URL:** `/api/config` 284 281 - **Method:** `GET` 285 282 - **Success Response:** 286 286 - 287 287 - - **Code:** 200 288 288 - - **Content:** 283 283 + - **Code:** 200 284 284 + - **Content:** 289 285 290 290 - ```json 291 291 - { 292 292 - "turnstileEnabled": true, 293 293 - "turnstileSiteKey": "0x0000000000000000000000", 294 294 - "moderationEnabled": true 295 295 - } 296 296 - ``` 286 286 + ```json 287 287 + { 288 288 + "turnstileEnabled": true, 289 289 + "turnstileSiteKey": "0x0000000000000000000000", 290 290 + "moderationEnabled": true 291 291 + } 292 292 + ``` 297 293 298 294 ## Environment Variables 299 295

+37 -44

TODO.md

reviewed

··· 3 3 ## High Priority 4 4 5 5 - [x] **Separate Test UI and Admin UI Controls**: There should be a way to disable the test UI without also disabling the admin UI 6 6 - 7 7 - - Add `USE_TEST_UI` environment variable to control access to `/index.html` test interface 8 8 - - Keep `USE_PUBLIC_FOLDER` for admin UI but add conditional routing for test interface 9 9 - - This would allow production deployments to disable testing while keeping admin functionality 6 6 + - Add `USE_TEST_UI` environment variable to control access to `/index.html` test interface 7 7 + - Keep `USE_PUBLIC_FOLDER` for admin UI but add conditional routing for test interface 8 8 + - This would allow production deployments to disable testing while keeping admin functionality 10 9 11 10 - [x] _(Removed in favor of NGINX)_ ~~**Fix SSL/HTTPS Implementation**: The current SSL implementation is incomplete and non-functional~~ 12 12 - - The SSL certificate and key are read but not actually used to create an HTTPS server 13 13 - - Need to implement proper HTTPS server with Express.js or migrate to native Deno HTTPS 14 14 - - Add proper SSL error handling and validation 11 11 + - The SSL certificate and key are read but not actually used to create an HTTPS server 12 12 + - Need to implement proper HTTPS server with Express.js or migrate to native Deno HTTPS 13 13 + - Add proper SSL error handling and validation 15 14 16 15 ## Medium Priority 17 16 18 17 - [x] **Environment Configuration Management** 19 19 - 20 20 - - Create a `.env.example` file with all available environment variables 21 21 - - Add environment variable validation on startup 22 22 - - Document all configuration options in README.md 18 18 + - Create a `.env.example` file with all available environment variables 19 19 + - Add environment variable validation on startup 20 20 + - Document all configuration options in README.md 23 21 24 22 - [x] **API Security Improvements** 25 25 - 26 26 - - Implement API key authentication for programmatic access 27 27 - - Add request size limits for file uploads 28 28 - - Consider adding CSRF protection for admin endpoints 29 29 - - _(Handled by Cloudflare)_ ~~Add rate limiting for API endpoints (especially `/api/levels` POST)~~ 23 23 + - Implement API key authentication for programmatic access 24 24 + - Add request size limits for file uploads 25 25 + - Consider adding CSRF protection for admin endpoints 26 26 + - _(Handled by Cloudflare)_ ~~Add rate limiting for API endpoints (especially `/api/levels` POST)~~ 30 27 31 28 - [ ] **Database Improvements** 32 32 - 33 33 - - Add database migrations system for schema changes 34 34 - - Implement database connection pooling 35 35 - - Add database backup/restore functionality 36 36 - - Add indexes for better query performance (author, created_at, etc.) 29 29 + - Add database migrations system for schema changes 30 30 + - Implement database connection pooling 31 31 + - Add database backup/restore functionality 32 32 + - Add indexes for better query performance (author, created_at, etc.) 37 33 38 34 - [ ] **Error Handling & Logging** 39 39 - - Implement structured logging (JSON format) 40 40 - - Add error tracking/monitoring integration 41 41 - - Improve error messages for better debugging 42 42 - - Add request/response logging middleware 35 35 + - Implement structured logging (JSON format) 36 36 + - Add error tracking/monitoring integration 37 37 + - Improve error messages for better debugging 38 38 + - Add request/response logging middleware 43 39 44 40 ## Low Priority 45 41 46 42 - [x] **Code Quality & Maintenance** 47 47 - 48 48 - - Split main.ts into separate modules (routes, middleware, database, etc.) 49 49 - - Add TypeScript strict mode configuration 50 50 - - Implement unit tests for core functionality 51 51 - - _(Decided against: API should not be public. README.md has instructions for the API.)_ ~~Add API documentation (OpenAPI/Swagger)~~ 43 43 + - Split main.ts into separate modules (routes, middleware, database, etc.) 44 44 + - Add TypeScript strict mode configuration 45 45 + - Implement unit tests for core functionality 46 46 + - _(Decided against: API should not be public. README.md has instructions for the API.)_ ~~Add API documentation (OpenAPI/Swagger)~~ 52 47 53 48 - [ ] **Feature Enhancements** 54 54 - 55 55 - - Add level search by tags/categories 56 56 - - Implement level comments/reviews system 57 57 - - Add user profiles and level collections 58 58 - - Add level statistics and analytics dashboard 49 49 + - Add level search by tags/categories 50 50 + - Implement level comments/reviews system 51 51 + - Add user profiles and level collections 52 52 + - Add level statistics and analytics dashboard 59 53 60 54 - [ ] **Performance Optimizations** 61 61 - 62 62 - - Implement response caching for level listings 63 63 - - Add CDN support for static files 64 64 - - Optimize database queries with prepared statements 65 65 - - Add pagination limits and validation 55 55 + - Implement response caching for level listings 56 56 + - Add CDN support for static files 57 57 + - Optimize database queries with prepared statements 58 58 + - Add pagination limits and validation 66 59 67 60 - [ ] **Deployment & DevOps** 68 68 - - Add Docker containerization 69 69 - - Create deployment scripts 70 70 - - Add health check endpoint (`/api/health`) 71 71 - - Implement graceful shutdown handling 61 61 + - Add Docker containerization 62 62 + - Create deployment scripts 63 63 + - Add health check endpoint (`/api/health`) 64 64 + - Implement graceful shutdown handling

+7 -14

deno.jsonc

reviewed

··· 1 1 { 2 2 "tasks": { 3 3 "dev": "deno run --watch --allow-env --allow-read --allow-write --allow-net --allow-ffi --allow-run --env-file=.env main.ts", 4 4 - "start": "deno run --allow-env --allow-read --allow-write --allow-net --allow-ffi --allow-run --env-file=.env main.ts" 4 4 + "start": "deno run --allow-env --allow-read --allow-write --allow-net --allow-ffi --allow-run --env-file=.env main.ts", 5 5 }, 6 6 "lint": { 7 7 "rules": { 8 8 - "exclude": ["no-explicit-any"] 9 9 - } 8 8 + "exclude": ["no-explicit-any"], 9 9 + }, 10 10 }, 11 11 "imports": { 12 12 "@db/sqlite": "jsr:@db/sqlite@^0.12.0", ··· 25 25 "express": "npm:express@^5.1.0", 26 26 "passport": "npm:passport@^0.7.0", 27 27 "passport-github2": "npm:passport-github2@^0.1.12", 28 28 - "pako": "npm:pako@^2.1.0" 28 28 + "pako": "npm:pako@^2.1.0", 29 29 }, 30 30 "fmt": { 31 31 "useTabs": true, ··· 34 34 "semiColons": true, 35 35 "singleQuote": false, 36 36 "proseWrap": "preserve", 37 37 - "include": [ 38 38 - "**/*.js", 39 39 - "**/*.ts", 40 40 - "**/*.json", 41 41 - "**/*.jsonc", 42 42 - "**/*.css", 43 43 - "**/*.html" 44 44 - ] 37 37 + "include": ["**/*.js", "**/*.ts", "**/*.json", "**/*.jsonc", "**/*.css", "**/*.html"], 45 38 }, 46 39 "compilerOptions": { 47 40 "strict": true, 48 48 - "strictNullChecks": true 49 49 - } 41 41 + "strictNullChecks": true, 42 42 + }, 50 43 }

+4 -2

modules/decode.ts

reviewed

··· 42 42 eleHeight: 15, 43 43 }; 44 44 45 45 - const REVERSE_TINYIFIER_MAP: Record<number, string> = Object.fromEntries(Object.entries(TINYIFIER_MAP).map(([key, value]) => [value, key]));$1//$2\l$3lant names array matching the frontend 45 45 + const REVERSE_TINYIFIER_MAP: Record<number, string> = Object.fromEntries(Object.entries(TINYIFIER_MAP).map(([key, value]) => [value, key])); 46 46 + $1; //$2\l$3lant names array matching the frontend 46 47 export const allPlantsStringArray = [ 47 48 "oPeashooter", 48 49 "oSunFlower", ··· 238 239 fileHeader[1] === izl3Header[1] && 239 240 fileHeader[2] === izl3Header[2] && 240 241 fileHeader[3] === izl3Header[3] 241 241 - ) { // IZL3 format - compressed msgpack bytes after the header. 242 242 + ) { 243 243 + // IZL3 format - compressed msgpack bytes after the header. 242 244 // decode directly from bytes (no base64 roundtrip). 243 245 const payload = fileBytes.slice(4); 244 246

+4 -9

modules/server/config.ts

reviewed

··· 44 44 export function loadConfig(): ServerConfig { 45 45 const port = Number(Deno.env.get("PORT") || 3000); 46 46 const corsEnabled = (Deno.env.get("CORS_ENABLED") ?? "true") === "true"; 47 47 - const allowedOriginsString = 48 48 - Deno.env.get("ALLOWED_ORIGINS") ?? 49 49 - "https://pvzm.net,https://backend.pvzm.net"; 47 47 + const allowedOriginsString = Deno.env.get("ALLOWED_ORIGINS") ?? "https://pvzm.net,https://backend.pvzm.net"; 50 48 const allowedOrigins = allowedOriginsString ? splitCsv(allowedOriginsString) : []; 51 49 52 50 const useGithubAuth = (Deno.env.get("USE_GITHUB_AUTH") ?? "true") === "true"; ··· 59 57 const useTestUI = (Deno.env.get("USE_TEST_UI") ?? "true") === "true"; 60 58 const useAdminUI = (Deno.env.get("USE_ADMIN_UI") ?? "true") === "true"; 61 59 62 62 - const usePublicFolder = 63 63 - (Deno.env.get("USE_PUBLIC_FOLDER") ?? "true") === "true"; 60 60 + const usePublicFolder = (Deno.env.get("USE_PUBLIC_FOLDER") ?? "true") === "true"; 64 61 const publicFolderPath = Deno.env.get("PUBLIC_FOLDER_PATH") || "./public"; 65 62 66 63 const discordReportWebhookUrl = Deno.env.get("DISCORD_REPORT_WEBHOOK_URL") || ""; ··· 75 72 76 73 const dbPath = Deno.env.get("DB_PATH") || "./database.db"; 77 74 const dataFolderPath = Deno.env.get("DATA_FOLDER_PATH") || "./data"; 78 78 - const createDataFolder = 79 79 - (Deno.env.get("CREATE_DATA_FOLDER") ?? "true") === "true"; 75 75 + const createDataFolder = (Deno.env.get("CREATE_DATA_FOLDER") ?? "true") === "true"; 80 76 81 77 const useTurnstile = (Deno.env.get("USE_TURNSTILE") ?? "true") === "true"; 82 78 const turnstileSecret = Deno.env.get("TURNSTILE_SECRET") || null; 83 79 const turnstileTesting = Deno.env.get("TURNSTILE_TESTING") === "true"; 84 80 85 85 - const useOpenAIModeration = 86 86 - (Deno.env.get("USE_OPENAI_MODERATION") ?? "true") === "true"; 81 81 + const useOpenAIModeration = (Deno.env.get("USE_OPENAI_MODERATION") ?? "true") === "true"; 87 82 const openAiApiKey = Deno.env.get("OPENAI_API_KEY") || null; 88 83 const turnstileSiteKey = Deno.env.get("TURNSTILE_SITE_KEY") || null; 89 84

+1 -1

modules/server/public_folder.ts

reviewed

··· 14 14 } else { 15 15 console.error(`Error creating public folder: ${(error as Error).message}`); 16 16 } 17 17 - } // add conditional route handlers BEFORE static file serving 17 17 + } // add conditional route handlers BEFORE static file serving 18 18 if (!config.useTestUI) { 19 19 app.get("/index.html", (_req: any, res: any) => { 20 20 res.status(404).send("Test UI is disabled");

+9 -27

public/admin.html

reviewed

··· 1 1 - <!DOCTYPE html> 1 1 + <!doctype html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8" /> ··· 137 137 <article> 138 138 <h2>Level Management</h2> 139 139 <fieldset role="group"> 140 140 - <input 141 141 - type="search" 142 142 - id="searchInput" 143 143 - placeholder="Search by name, author, or ID" 144 144 - /> 140 140 + <input type="search" id="searchInput" placeholder="Search by name, author, or ID" /> 145 141 <button id="searchButton">Search</button> 146 142 <button id="resetButton" class="outline secondary">Reset</button> 147 143 </fieldset> ··· 244 240 const tokenActionRaw = (urlParams.get("action") || "").trim(); 245 241 const tokenAction = tokenActionRaw.toLowerCase(); 246 242 const tokenLevelId = parseInt((urlParams.get("level") || "").trim(), 10); 247 247 - const hasTokenFlowParams = 248 248 - Boolean(oneTimeToken) && 249 249 - (tokenAction === "edit" || tokenAction === "delete") && 250 250 - Number.isFinite(tokenLevelId); 243 243 + const hasTokenFlowParams = Boolean(oneTimeToken) && (tokenAction === "edit" || tokenAction === "delete") && Number.isFinite(tokenLevelId); 251 244 252 245 function closeWindowAfterTokenAction(levelId) { 253 246 if (!oneTimeToken) return false; ··· 263 256 async function validateTokenFlow() { 264 257 if (!hasTokenFlowParams) return false; 265 258 try { 266 266 - const resp = await fetch( 267 267 - `${API_BASE_URL}/levels?token=${encodeURIComponent(oneTimeToken)}` 268 268 - ); 259 259 + const resp = await fetch(`${API_BASE_URL}/levels?token=${encodeURIComponent(oneTimeToken)}`); 269 260 if (!resp.ok) return false; 270 261 const data = await resp.json(); 271 262 const levels = Array.isArray(data?.levels) ? data.levels : []; ··· 278 269 279 270 async function getTokenLevel() { 280 271 try { 281 281 - const resp = await fetch( 282 282 - `${API_BASE_URL}/levels?token=${encodeURIComponent(oneTimeToken)}` 283 283 - ); 272 272 + const resp = await fetch(`${API_BASE_URL}/levels?token=${encodeURIComponent(oneTimeToken)}`); 284 273 if (!resp.ok) return null; 285 274 const data = await resp.json(); 286 275 const levels = Array.isArray(data?.levels) ? data.levels : []; ··· 490 479 const date = new Date(level.created_at * 1000); 491 480 const formattedDate = date.toLocaleDateString(); 492 481 493 493 - const difficultyClass = level.difficulty 494 494 - ? `difficulty-${level.difficulty}` 495 495 - : ""; 482 482 + const difficultyClass = level.difficulty ? `difficulty-${level.difficulty}` : ""; 496 483 const difficultyDisplay = level.difficulty 497 484 ? `<span class="difficulty-marker ${difficultyClass}"></span>${level.difficulty}/10` 498 485 : "Not set"; ··· 551 538 document.getElementById("editAuthor").value = level.author; 552 539 document.getElementById("editSun").value = level.sun; 553 540 document.getElementById("editIsWater").checked = level.is_water === 1; 554 554 - document.getElementById("editDifficulty").value = 555 555 - level.difficulty === null || level.difficulty === undefined 556 556 - ? "" 557 557 - : level.difficulty; 541 541 + document.getElementById("editDifficulty").value = level.difficulty === null || level.difficulty === undefined ? "" : level.difficulty; 558 542 document.getElementById("editFavorites").value = level.favorites; 559 543 document.getElementById("editPlays").value = level.plays; 560 544 ··· 579 563 const plays = parseInt(document.getElementById("editPlays").value); 580 564 581 565 let url = `${API_BASE_URL}/admin/levels/${levelId}`; 582 582 - const usingOneTimeToken = 583 583 - oneTimeToken && String(levelId) === String(tokenLevelId); 566 566 + const usingOneTimeToken = oneTimeToken && String(levelId) === String(tokenLevelId); 584 567 if (usingOneTimeToken) { 585 568 url += `?token=${encodeURIComponent(oneTimeToken)}`; 586 569 } ··· 626 609 async function deleteLevel(levelId) { 627 610 try { 628 611 let url = `${API_BASE_URL}/admin/levels/${levelId}`; 629 629 - const usingOneTimeToken = 630 630 - oneTimeToken && String(levelId) === String(tokenLevelId); 612 612 + const usingOneTimeToken = oneTimeToken && String(levelId) === String(tokenLevelId); 631 613 if (usingOneTimeToken) { 632 614 url += `?token=${encodeURIComponent(oneTimeToken)}`; 633 615 }

+4 -17

public/auth-error.html

reviewed

··· 1 1 - <!DOCTYPE html> 1 1 + <!doctype html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8" /> ··· 15 15 </style> 16 16 </head> 17 17 <body> 18 18 - <main 19 19 - style=" 20 20 - height: 100vh; 21 21 - display: flex; 22 22 - align-items: center; 23 23 - justify-content: center; 24 24 - " 25 25 - > 18 18 + <main style="height: 100vh; display: flex; align-items: center; justify-content: center"> 26 19 <article style="max-width: 510px; text-align: center"> 27 20 <div class="error-icon">⚠</div> 28 21 <h1>Access Denied</h1> 29 29 - <p> 30 30 - You are not authorized to access the admin dashboard. Only approved GitHub users 31 31 - can access this area. 32 32 - </p> 33 33 - <p> 34 34 - If you believe this is an error, please contact the system administrator to have 35 35 - your GitHub username added to the allowlist. 36 36 - </p> 22 22 + <p>You are not authorized to access the admin dashboard. Only approved GitHub users can access this area.</p> 23 23 + <p>If you believe this is an error, please contact the system administrator to have your GitHub username added to the allowlist.</p> 37 24 <p> 38 25 <a href="/" class="button">Return to Home</a> 39 26 </p>

+160 -515

public/css/pico.classless.conditional.green.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 31 28 --pico-form-element-spacing-vertical: 0.75rem; 32 29 --pico-form-element-spacing-horizontal: 1rem; 33 30 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 34 34 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 35 35 - var(--pico-primary-focus); 36 36 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 37 37 - var(--pico-form-element-border-color); 31 31 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 32 32 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 38 33 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 39 34 --pico-nav-element-spacing-vertical: 1rem; 40 35 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 153 148 --pico-font-weight: bolder; 154 149 } 155 150 156 156 - input:not( 157 157 - [type="submit"], 158 158 - [type="button"], 159 159 - [type="reset"], 160 160 - [type="checkbox"], 161 161 - [type="radio"], 162 162 - [type="file"] 163 163 - ), 151 151 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 164 152 :where(select, textarea) { 165 153 --pico-outline-width: 0.0625rem; 166 154 } ··· 197 185 filter: brightness(0) invert(1); 198 186 } 199 187 200 200 - .pico 201 201 - [aria-busy="true"]:not(input, select, textarea):is( 202 202 - button, 203 203 - [type="submit"], 204 204 - [type="button"], 205 205 - [type="reset"], 206 206 - [role="button"] 207 207 - )::before { 188 188 + .pico [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])::before { 208 189 filter: brightness(0) invert(1); 209 190 } 210 191 ··· 250 231 --pico-contrast-hover-underline: var(--pico-secondary-hover); 251 232 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 252 233 --pico-contrast-inverse: #fff; 253 253 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 254 254 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 255 255 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 256 256 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 257 257 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 258 258 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 259 259 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 234 234 + --pico-box-shadow: 235 235 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 236 236 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 237 237 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 260 238 --pico-h1-color: #2d3138; 261 239 --pico-h2-color: #373c44; 262 240 --pico-h3-color: #424751; ··· 288 266 --pico-form-element-disabled-opacity: 0.5; 289 267 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 290 268 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 291 291 - --pico-form-element-invalid-focus-color: var( 292 292 - --pico-form-element-invalid-active-border-color 293 293 - ); 269 269 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 294 270 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 295 271 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 296 296 - --pico-form-element-valid-focus-color: var( 297 297 - --pico-form-element-valid-active-border-color 298 298 - ); 272 272 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 299 273 --pico-switch-background-color: #bfc7d9; 300 274 --pico-switch-checked-background-color: var(--pico-primary-background); 301 275 --pico-switch-color: #fff; ··· 322 296 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 323 297 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 324 298 } 325 325 - [data-theme="light"] 326 326 - input:is( 327 327 - [type="submit"], 328 328 - [type="button"], 329 329 - [type="reset"], 330 330 - [type="checkbox"], 331 331 - [type="radio"], 332 332 - [type="file"] 333 333 - ), 334 334 - :root:not([data-theme="dark"]) 335 335 - input:is( 336 336 - [type="submit"], 337 337 - [type="button"], 338 338 - [type="reset"], 339 339 - [type="checkbox"], 340 340 - [type="radio"], 341 341 - [type="file"] 342 342 - ), 343 343 - :host(:not([data-theme="dark"])) 344 344 - input:is( 345 345 - [type="submit"], 346 346 - [type="button"], 347 347 - [type="reset"], 348 348 - [type="checkbox"], 349 349 - [type="radio"], 350 350 - [type="file"] 351 351 - ) { 299 299 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 300 300 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 301 301 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 352 302 --pico-form-element-focus-color: var(--pico-primary-focus); 353 303 } 354 304 ··· 391 341 --pico-contrast-hover-underline: var(--pico-contrast-hover); 392 342 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 393 343 --pico-contrast-inverse: #000; 394 394 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 395 395 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 396 396 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 397 397 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 398 398 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 399 399 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 344 344 + --pico-box-shadow: 345 345 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 346 346 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 347 347 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 400 348 --pico-h1-color: #f0f1f3; 401 349 --pico-h2-color: #e0e3e7; 402 350 --pico-h3-color: #c2c7d0; ··· 428 376 --pico-form-element-disabled-opacity: 0.5; 429 377 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 430 378 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 431 431 - --pico-form-element-invalid-focus-color: var( 432 432 - --pico-form-element-invalid-active-border-color 433 433 - ); 379 379 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 434 380 --pico-form-element-valid-border-color: #2a7b6f; 435 381 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 436 436 - --pico-form-element-valid-focus-color: var( 437 437 - --pico-form-element-valid-active-border-color 438 438 - ); 382 382 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 439 383 --pico-switch-background-color: #333c4e; 440 384 --pico-switch-checked-background-color: var(--pico-primary-background); 441 385 --pico-switch-color: #fff; ··· 462 406 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 463 407 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 464 408 } 465 465 - :root:not([data-theme]) 466 466 - input:is( 467 467 - [type="submit"], 468 468 - [type="button"], 469 469 - [type="reset"], 470 470 - [type="checkbox"], 471 471 - [type="radio"], 472 472 - [type="file"] 473 473 - ), 474 474 - :host(:not([data-theme])) 475 475 - input:is( 476 476 - [type="submit"], 477 477 - [type="button"], 478 478 - [type="reset"], 479 479 - [type="checkbox"], 480 480 - [type="radio"], 481 481 - [type="file"] 482 482 - ) { 409 409 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 410 410 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 483 411 --pico-form-element-focus-color: var(--pico-primary-focus); 484 412 } 485 413 } ··· 520 448 --pico-contrast-hover-underline: var(--pico-contrast-hover); 521 449 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 522 450 --pico-contrast-inverse: #000; 523 523 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 524 524 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 525 525 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 526 526 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 527 527 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 528 528 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 451 451 + --pico-box-shadow: 452 452 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 453 453 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 454 454 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 529 455 --pico-h1-color: #f0f1f3; 530 456 --pico-h2-color: #e0e3e7; 531 457 --pico-h3-color: #c2c7d0; ··· 557 483 --pico-form-element-disabled-opacity: 0.5; 558 484 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 559 485 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 560 560 - --pico-form-element-invalid-focus-color: var( 561 561 - --pico-form-element-invalid-active-border-color 562 562 - ); 486 486 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 563 487 --pico-form-element-valid-border-color: #2a7b6f; 564 488 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 565 565 - --pico-form-element-valid-focus-color: var( 566 566 - --pico-form-element-valid-active-border-color 567 567 - ); 489 489 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 568 490 --pico-switch-background-color: #333c4e; 569 491 --pico-switch-checked-background-color: var(--pico-primary-background); 570 492 --pico-switch-color: #fff; ··· 591 513 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 592 514 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 593 515 } 594 594 - [data-theme="dark"] 595 595 - input:is( 596 596 - [type="submit"], 597 597 - [type="button"], 598 598 - [type="reset"], 599 599 - [type="checkbox"], 600 600 - [type="radio"], 601 601 - [type="file"] 602 602 - ) { 516 516 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 603 517 --pico-form-element-focus-color: var(--pico-primary-focus); 604 518 } 605 519 ··· 790 704 --pico-color: var(--pico-h6-color); 791 705 } 792 706 793 793 - .pico 794 794 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 795 795 - ~ :is(h1, h2, h3, h4, h5, h6) { 707 707 + .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 796 708 margin-top: var(--pico-typography-spacing-top); 797 709 } 798 710 ··· 885 797 text-decoration: var(--pico-text-decoration); 886 798 text-decoration-color: var(--pico-underline); 887 799 text-underline-offset: 0.125em; 888 888 - transition: background-color var(--pico-transition), 889 889 - color var(--pico-transition), box-shadow var(--pico-transition), 800 800 + transition: 801 801 + background-color var(--pico-transition), 802 802 + color var(--pico-transition), 803 803 + box-shadow var(--pico-transition), 890 804 -webkit-text-decoration var(--pico-transition); 891 891 - transition: background-color var(--pico-transition), 892 892 - color var(--pico-transition), text-decoration var(--pico-transition), 805 805 + transition: 806 806 + background-color var(--pico-transition), 807 807 + color var(--pico-transition), 808 808 + text-decoration var(--pico-transition), 893 809 box-shadow var(--pico-transition); 894 894 - transition: background-color var(--pico-transition), 895 895 - color var(--pico-transition), text-decoration var(--pico-transition), 810 810 + transition: 811 811 + background-color var(--pico-transition), 812 812 + color var(--pico-transition), 813 813 + text-decoration var(--pico-transition), 896 814 box-shadow var(--pico-transition), 897 815 -webkit-text-decoration var(--pico-transition); 898 816 } 899 899 - .pico 900 900 - :where(a:not([role="button"])):is( 901 901 - [aria-current]:not([aria-current="false"]), 902 902 - :hover, 903 903 - :active, 904 904 - :focus 905 905 - ), 906 906 - .pico 907 907 - [role="link"]:is( 908 908 - [aria-current]:not([aria-current="false"]), 909 909 - :hover, 910 910 - :active, 911 911 - :focus 912 912 - ) { 817 817 + .pico :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 818 818 + .pico [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 913 819 --pico-color: var(--pico-primary-hover); 914 820 --pico-underline: var(--pico-primary-hover-underline); 915 821 --pico-text-decoration: underline; ··· 950 856 --pico-border-color: var(--pico-primary-border); 951 857 --pico-color: var(--pico-primary-inverse); 952 858 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 953 953 - padding: var(--pico-form-element-spacing-vertical) 954 954 - var(--pico-form-element-spacing-horizontal); 859 859 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 955 860 border: var(--pico-border-width) solid var(--pico-border-color); 956 861 border-radius: var(--pico-border-radius); 957 862 outline: none; ··· 967 872 -webkit-user-select: none; 968 873 -moz-user-select: none; 969 874 user-select: none; 970 970 - transition: background-color var(--pico-transition), 971 971 - border-color var(--pico-transition), color var(--pico-transition), 875 875 + transition: 876 876 + background-color var(--pico-transition), 877 877 + border-color var(--pico-transition), 878 878 + color var(--pico-transition), 972 879 box-shadow var(--pico-transition); 973 880 } 974 881 .pico button:is([aria-current]:not([aria-current="false"])), ··· 979 886 .pico [type="reset"]:is(:hover, :active, :focus), 980 887 .pico [type="button"]:is([aria-current]:not([aria-current="false"])), 981 888 .pico [type="button"]:is(:hover, :active, :focus), 982 982 - .pico 983 983 - [type="file"]::file-selector-button:is( 984 984 - [aria-current]:not([aria-current="false"]) 985 985 - ), 889 889 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 986 890 .pico [type="file"]::file-selector-button:is(:hover, :active, :focus), 987 891 .pico [role="button"]:is([aria-current]:not([aria-current="false"])), 988 892 .pico [role="button"]:is(:hover, :active, :focus) { ··· 1000 904 .pico [type="button"]:focus, 1001 905 .pico [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 1002 906 .pico [type="file"]::file-selector-button:focus, 1003 1003 - .pico 1004 1004 - [type="file"]::file-selector-button:is( 1005 1005 - [aria-current]:not([aria-current="false"]) 1006 1006 - ):focus, 907 907 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 1007 908 .pico [role="button"]:focus, 1008 909 .pico [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 1009 1009 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1010 1010 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 910 910 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1011 911 } 1012 912 1013 913 .pico [type="submit"], ··· 1023 923 --pico-color: var(--pico-secondary-inverse); 1024 924 cursor: pointer; 1025 925 } 1026 1026 - .pico 1027 1027 - [type="reset"]:is( 1028 1028 - [aria-current]:not([aria-current="false"]), 1029 1029 - :hover, 1030 1030 - :active, 1031 1031 - :focus 1032 1032 - ), 1033 1033 - .pico 1034 1034 - [type="file"]::file-selector-button:is( 1035 1035 - [aria-current]:not([aria-current="false"]), 1036 1036 - :hover, 1037 1037 - :active, 1038 1038 - :focus 1039 1039 - ) { 926 926 + .pico [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 927 927 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1040 928 --pico-background-color: var(--pico-secondary-hover-background); 1041 929 --pico-border-color: var(--pico-secondary-hover-border); 1042 930 --pico-color: var(--pico-secondary-inverse); 1043 931 } 1044 932 .pico [type="reset"]:focus, 1045 933 .pico [type="file"]::file-selector-button:focus { 1046 1046 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1047 1047 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 934 934 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1048 935 } 1049 936 1050 1050 - .pico 1051 1051 - :where( 1052 1052 - button, 1053 1053 - [type="submit"], 1054 1054 - [type="reset"], 1055 1055 - [type="button"], 1056 1056 - [role="button"] 1057 1057 - )[disabled], 1058 1058 - .pico 1059 1059 - :where(fieldset[disabled]) 1060 1060 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 937 937 + .pico :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 938 938 + .pico :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1061 939 opacity: 0.5; 1062 940 pointer-events: none; 1063 941 } ··· 1303 1181 } 1304 1182 1305 1183 .pico input:not([type="checkbox"], [type="radio"], [type="range"]) { 1306 1306 - height: calc( 1307 1307 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1308 1308 - var(--pico-border-width) * 2 1309 1309 - ); 1184 1184 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1310 1185 } 1311 1186 1312 1187 .pico fieldset { ··· 1336 1211 width: 100%; 1337 1212 } 1338 1213 1339 1339 - .pico 1340 1340 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 1214 1214 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 1341 1215 .pico select, 1342 1216 .pico textarea { 1343 1217 -webkit-appearance: none; 1344 1218 -moz-appearance: none; 1345 1219 appearance: none; 1346 1346 - padding: var(--pico-form-element-spacing-vertical) 1347 1347 - var(--pico-form-element-spacing-horizontal); 1220 1220 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1348 1221 } 1349 1222 1350 1223 .pico input, ··· 1361 1234 box-shadow: var(--pico-box-shadow); 1362 1235 color: var(--pico-color); 1363 1236 font-weight: var(--pico-font-weight); 1364 1364 - transition: background-color var(--pico-transition), 1365 1365 - border-color var(--pico-transition), color var(--pico-transition), 1237 1237 + transition: 1238 1238 + background-color var(--pico-transition), 1239 1239 + border-color var(--pico-transition), 1240 1240 + color var(--pico-transition), 1366 1241 box-shadow var(--pico-transition); 1367 1242 } 1368 1243 1369 1369 - .pico 1370 1370 - input:not( 1371 1371 - [type="submit"], 1372 1372 - [type="button"], 1373 1373 - [type="reset"], 1374 1374 - [type="checkbox"], 1375 1375 - [type="radio"], 1376 1376 - [readonly] 1377 1377 - ):is(:active, :focus), 1244 1244 + .pico input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1378 1245 .pico :where(select, textarea):not([readonly]):is(:active, :focus) { 1379 1246 --pico-background-color: var(--pico-form-element-active-background-color); 1380 1247 } 1381 1248 1382 1382 - .pico 1383 1383 - input:not( 1384 1384 - [type="submit"], 1385 1385 - [type="button"], 1386 1386 - [type="reset"], 1387 1387 - [role="switch"], 1388 1388 - [readonly] 1389 1389 - ):is(:active, :focus), 1249 1249 + .pico input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1390 1250 .pico :where(select, textarea):not([readonly]):is(:active, :focus) { 1391 1251 --pico-border-color: var(--pico-form-element-active-border-color); 1392 1252 } 1393 1253 1394 1394 - .pico 1395 1395 - input:not( 1396 1396 - [type="submit"], 1397 1397 - [type="button"], 1398 1398 - [type="reset"], 1399 1399 - [type="range"], 1400 1400 - [type="file"], 1401 1401 - [readonly] 1402 1402 - ):focus, 1254 1254 + .pico input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1403 1255 .pico :where(select, textarea):not([readonly]):focus { 1404 1404 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1405 1405 - var(--pico-form-element-focus-color); 1256 1256 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1406 1257 } 1407 1258 1408 1259 .pico input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1409 1260 .pico select[disabled], 1410 1261 .pico textarea[disabled], 1411 1262 .pico label[aria-disabled="true"], 1412 1412 - .pico 1413 1413 - :where(fieldset[disabled]) 1414 1414 - :is( 1415 1415 - input:not([type="submit"], [type="button"], [type="reset"]), 1416 1416 - select, 1417 1417 - textarea 1418 1418 - ) { 1263 1263 + .pico :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1419 1264 opacity: var(--pico-form-element-disabled-opacity); 1420 1265 pointer-events: none; 1421 1266 } ··· 1435 1280 [type="week"], 1436 1281 [type="range"] 1437 1282 )[aria-invalid] { 1438 1438 - padding-right: calc( 1439 1439 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1440 1440 - ) !important; 1283 1283 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1441 1284 padding-left: var(--pico-form-element-spacing-horizontal); 1442 1285 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1443 1443 - padding-inline-end: calc( 1444 1444 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1445 1445 - ) !important; 1286 1286 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1446 1287 background-position: center right 0.75rem; 1447 1288 background-size: 1rem auto; 1448 1289 background-repeat: no-repeat; ··· 1476 1317 .pico :where(input, select, textarea)[aria-invalid="false"] { 1477 1318 --pico-border-color: var(--pico-form-element-valid-border-color); 1478 1319 } 1479 1479 - .pico 1480 1480 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1481 1481 - --pico-border-color: var( 1482 1482 - --pico-form-element-valid-active-border-color 1483 1483 - ) !important; 1320 1320 + .pico :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1321 1321 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1484 1322 } 1485 1485 - .pico 1486 1486 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1487 1487 - [type="checkbox"], 1488 1488 - [type="radio"] 1489 1489 - ) { 1490 1490 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1491 1491 - var(--pico-form-element-valid-focus-color) !important; 1323 1323 + .pico :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1324 1324 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1492 1325 } 1493 1326 .pico :where(input, select, textarea)[aria-invalid="true"] { 1494 1327 --pico-border-color: var(--pico-form-element-invalid-border-color); 1495 1328 } 1496 1329 .pico :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1497 1497 - --pico-border-color: var( 1498 1498 - --pico-form-element-invalid-active-border-color 1499 1499 - ) !important; 1330 1330 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1500 1331 } 1501 1501 - .pico 1502 1502 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1503 1503 - [type="checkbox"], 1504 1504 - [type="radio"] 1505 1505 - ) { 1506 1506 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1507 1507 - var(--pico-form-element-invalid-focus-color) !important; 1332 1332 + .pico :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1333 1333 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1508 1334 } 1509 1335 1510 1510 - [dir="rtl"] 1511 1511 - .pico 1512 1512 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1513 1513 - [aria-invalid], 1514 1514 - [aria-invalid="true"], 1515 1515 - [aria-invalid="false"] 1516 1516 - ) { 1336 1336 + [dir="rtl"] .pico :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1517 1337 background-position: center left 0.75rem; 1518 1338 } 1519 1339 ··· 1560 1380 resize: vertical; 1561 1381 } 1562 1382 .pico textarea[aria-invalid] { 1563 1563 - --pico-icon-height: calc( 1564 1564 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1565 1565 - var(--pico-border-width) * 2 1566 1566 - ); 1383 1383 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1567 1384 background-position: top right 0.75rem !important; 1568 1385 background-size: 1rem var(--pico-icon-height) !important; 1569 1386 } ··· 1772 1589 background-size: var(--pico-icon-width) auto; 1773 1590 background-repeat: no-repeat; 1774 1591 } 1775 1775 - .pico 1776 1776 - input:not( 1777 1777 - [type="checkbox"], 1778 1778 - [type="radio"], 1779 1779 - [type="range"], 1780 1780 - [type="file"] 1781 1781 - )[type="time"] { 1592 1592 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 1782 1593 background-image: var(--pico-icon-time); 1783 1594 } 1784 1595 ··· 1803 1614 background-image: none !important; 1804 1615 } 1805 1616 } 1806 1806 - [dir="rtl"] 1807 1807 - .pico 1808 1808 - :is( 1809 1809 - [type="date"], 1810 1810 - [type="datetime-local"], 1811 1811 - [type="month"], 1812 1812 - [type="time"], 1813 1813 - [type="week"] 1814 1814 - ) { 1617 1617 + [dir="rtl"] .pico :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 1815 1618 text-align: right; 1816 1619 } 1817 1620 ··· 1829 1632 } 1830 1633 .pico [type="file"]::file-selector-button { 1831 1634 margin-right: calc(var(--pico-spacing) / 2); 1832 1832 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 1833 1833 - var(--pico-form-element-spacing-horizontal); 1635 1635 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 1834 1636 } 1835 1637 .pico [type="file"]:is(:hover, :active, :focus)::file-selector-button { 1836 1638 --pico-background-color: var(--pico-secondary-hover-background); 1837 1639 --pico-border-color: var(--pico-secondary-hover-border); 1838 1640 } 1839 1641 .pico [type="file"]:focus::file-selector-button { 1840 1840 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1841 1841 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1642 1642 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1842 1643 } 1843 1644 1844 1645 /** ··· 1857 1658 height: 0.375rem; 1858 1659 border-radius: var(--pico-border-radius); 1859 1660 background-color: var(--pico-range-border-color); 1860 1860 - -webkit-transition: background-color var(--pico-transition), 1661 1661 + -webkit-transition: 1662 1662 + background-color var(--pico-transition), 1861 1663 box-shadow var(--pico-transition); 1862 1862 - transition: background-color var(--pico-transition), 1664 1664 + transition: 1665 1665 + background-color var(--pico-transition), 1863 1666 box-shadow var(--pico-transition); 1864 1667 } 1865 1668 .pico [type="range"]::-moz-range-track { ··· 1867 1670 height: 0.375rem; 1868 1671 border-radius: var(--pico-border-radius); 1869 1672 background-color: var(--pico-range-border-color); 1870 1870 - -moz-transition: background-color var(--pico-transition), 1673 1673 + -moz-transition: 1674 1674 + background-color var(--pico-transition), 1871 1675 box-shadow var(--pico-transition); 1872 1872 - transition: background-color var(--pico-transition), 1676 1676 + transition: 1677 1677 + background-color var(--pico-transition), 1873 1678 box-shadow var(--pico-transition); 1874 1679 } 1875 1680 .pico [type="range"]::-ms-track { ··· 1877 1682 height: 0.375rem; 1878 1683 border-radius: var(--pico-border-radius); 1879 1684 background-color: var(--pico-range-border-color); 1880 1880 - -ms-transition: background-color var(--pico-transition), 1685 1685 + -ms-transition: 1686 1686 + background-color var(--pico-transition), 1881 1687 box-shadow var(--pico-transition); 1882 1882 - transition: background-color var(--pico-transition), 1688 1688 + transition: 1689 1689 + background-color var(--pico-transition), 1883 1690 box-shadow var(--pico-transition); 1884 1691 } 1885 1692 .pico [type="range"]::-webkit-slider-thumb { ··· 1891 1698 border-radius: 50%; 1892 1699 background-color: var(--pico-range-thumb-color); 1893 1700 cursor: pointer; 1894 1894 - -webkit-transition: background-color var(--pico-transition), 1701 1701 + -webkit-transition: 1702 1702 + background-color var(--pico-transition), 1895 1703 transform var(--pico-transition); 1896 1896 - transition: background-color var(--pico-transition), 1704 1704 + transition: 1705 1705 + background-color var(--pico-transition), 1897 1706 transform var(--pico-transition); 1898 1707 } 1899 1708 .pico [type="range"]::-moz-range-thumb { ··· 1905 1714 border-radius: 50%; 1906 1715 background-color: var(--pico-range-thumb-color); 1907 1716 cursor: pointer; 1908 1908 - -moz-transition: background-color var(--pico-transition), 1717 1717 + -moz-transition: 1718 1718 + background-color var(--pico-transition), 1909 1719 transform var(--pico-transition); 1910 1910 - transition: background-color var(--pico-transition), 1720 1720 + transition: 1721 1721 + background-color var(--pico-transition), 1911 1722 transform var(--pico-transition); 1912 1723 } 1913 1724 .pico [type="range"]::-ms-thumb { ··· 1919 1730 border-radius: 50%; 1920 1731 background-color: var(--pico-range-thumb-color); 1921 1732 cursor: pointer; 1922 1922 - -ms-transition: background-color var(--pico-transition), 1733 1733 + -ms-transition: 1734 1734 + background-color var(--pico-transition), 1923 1735 transform var(--pico-transition); 1924 1924 - transition: background-color var(--pico-transition), 1736 1736 + transition: 1737 1737 + background-color var(--pico-transition), 1925 1738 transform var(--pico-transition); 1926 1739 } 1927 1740 .pico [type="range"]:active, ··· 1942 1755 /** 1943 1756 * Input type search 1944 1757 */ 1945 1945 - .pico 1946 1946 - input:not( 1947 1947 - [type="checkbox"], 1948 1948 - [type="radio"], 1949 1949 - [type="range"], 1950 1950 - [type="file"] 1951 1951 - )[type="search"] { 1952 1952 - padding-inline-start: calc( 1953 1953 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1954 1954 - ); 1758 1758 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1759 1759 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 1955 1760 background-image: var(--pico-icon-search); 1956 1956 - background-position: center left 1957 1957 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1761 1761 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1958 1762 background-size: 1rem auto; 1959 1763 background-repeat: no-repeat; 1960 1764 } 1961 1961 - .pico 1962 1962 - input:not( 1963 1963 - [type="checkbox"], 1964 1964 - [type="radio"], 1965 1965 - [type="range"], 1966 1966 - [type="file"] 1967 1967 - )[type="search"][aria-invalid] { 1968 1968 - padding-inline-start: calc( 1969 1969 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1970 1970 - ) !important; 1971 1971 - background-position: center left 1.125rem, center right 0.75rem; 1765 1765 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1766 1766 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1767 1767 + background-position: 1768 1768 + center left 1.125rem, 1769 1769 + center right 0.75rem; 1972 1770 } 1973 1973 - .pico 1974 1974 - input:not( 1975 1975 - [type="checkbox"], 1976 1976 - [type="radio"], 1977 1977 - [type="range"], 1978 1978 - [type="file"] 1979 1979 - )[type="search"][aria-invalid="false"] { 1771 1771 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 1980 1772 background-image: var(--pico-icon-search), var(--pico-icon-valid); 1981 1773 } 1982 1982 - .pico 1983 1983 - input:not( 1984 1984 - [type="checkbox"], 1985 1985 - [type="radio"], 1986 1986 - [type="range"], 1987 1987 - [type="file"] 1988 1988 - )[type="search"][aria-invalid="true"] { 1774 1774 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 1989 1775 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 1990 1776 } 1991 1777 1992 1992 - [dir="rtl"] 1993 1993 - .pico 1994 1994 - :where(input):not( 1995 1995 - [type="checkbox"], 1996 1996 - [type="radio"], 1997 1997 - [type="range"], 1998 1998 - [type="file"] 1999 1999 - )[type="search"] { 1778 1778 + [dir="rtl"] .pico :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 2000 1779 background-position: center right 1.125rem; 2001 1780 } 2002 2002 - [dir="rtl"] 2003 2003 - .pico 2004 2004 - :where(input):not( 2005 2005 - [type="checkbox"], 2006 2006 - [type="radio"], 2007 2007 - [type="range"], 2008 2008 - [type="file"] 2009 2009 - )[type="search"][aria-invalid] { 2010 2010 - background-position: center right 1.125rem, center left 0.75rem; 1781 1781 + [dir="rtl"] .pico :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1782 1782 + background-position: 1783 1783 + center right 1.125rem, 1784 1784 + center left 0.75rem; 2011 1785 } 2012 1786 2013 1787 /** ··· 2099 1873 .pico article > footer { 2100 1874 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2101 1875 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2102 2102 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2103 2103 - var(--pico-block-spacing-horizontal); 1876 1876 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2104 1877 background-color: var(--pico-card-sectioning-background-color); 2105 1878 } 2106 1879 .pico article > header { ··· 2143 1916 margin-bottom: 0; 2144 1917 } 2145 1918 .pico [role="search"] > *:not(:first-child), 2146 2146 - .pico 2147 2147 - [role="search"] 2148 2148 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1919 1919 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2149 1920 .pico [role="search"] select:not(:first-child), 2150 1921 .pico [role="group"] > *:not(:first-child), 2151 2151 - .pico 2152 2152 - [role="group"] 2153 2153 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1922 1922 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2154 1923 .pico [role="group"] select:not(:first-child) { 2155 1924 margin-left: 0; 2156 1925 border-top-left-radius: 0; 2157 1926 border-bottom-left-radius: 0; 2158 1927 } 2159 1928 .pico [role="search"] > *:not(:last-child), 2160 2160 - .pico 2161 2161 - [role="search"] 2162 2162 - input:not([type="checkbox"], [type="radio"]):not(:last-child), 1929 1929 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), 2163 1930 .pico [role="search"] select:not(:last-child), 2164 1931 .pico [role="group"] > *:not(:last-child), 2165 2165 - .pico 2166 2166 - [role="group"] 2167 2167 - input:not([type="checkbox"], [type="radio"]):not(:last-child), 1932 1932 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), 2168 1933 .pico [role="group"] select:not(:last-child) { 2169 1934 border-top-right-radius: 0; 2170 1935 border-bottom-right-radius: 0; ··· 2182 1947 .pico [role="search"] [type="reset"]:not(:first-child), 2183 1948 .pico [role="search"] [type="button"]:not(:first-child), 2184 1949 .pico [role="search"] [role="button"]:not(:first-child), 2185 2185 - .pico 2186 2186 - [role="search"] 2187 2187 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1950 1950 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2188 1951 .pico [role="search"] select:not(:first-child), 2189 1952 .pico [role="group"] button:not(:first-child), 2190 1953 .pico [role="group"] [type="submit"]:not(:first-child), 2191 1954 .pico [role="group"] [type="reset"]:not(:first-child), 2192 1955 .pico [role="group"] [type="button"]:not(:first-child), 2193 1956 .pico [role="group"] [role="button"]:not(:first-child), 2194 2194 - .pico 2195 2195 - [role="group"] 2196 2196 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1957 1957 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2197 1958 .pico [role="group"] select:not(:first-child) { 2198 1959 margin-left: calc(var(--pico-border-width) * -1); 2199 1960 } ··· 2210 1971 width: auto; 2211 1972 } 2212 1973 @supports selector(:has(*)) { 2213 2213 - .pico 2214 2214 - [role="search"]:has( 2215 2215 - button:focus, 2216 2216 - [type="submit"]:focus, 2217 2217 - [type="button"]:focus, 2218 2218 - [role="button"]:focus 2219 2219 - ), 2220 2220 - .pico 2221 2221 - [role="group"]:has( 2222 2222 - button:focus, 2223 2223 - [type="submit"]:focus, 2224 2224 - [type="button"]:focus, 2225 2225 - [role="button"]:focus 2226 2226 - ) { 1974 1974 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 1975 1975 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2227 1976 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2228 1977 } 2229 2229 - .pico 2230 2230 - [role="search"]:has( 2231 2231 - button:focus, 2232 2232 - [type="submit"]:focus, 2233 2233 - [type="button"]:focus, 2234 2234 - [role="button"]:focus 2235 2235 - ) 2236 2236 - input:not([type="checkbox"], [type="radio"]), 2237 2237 - .pico 2238 2238 - [role="search"]:has( 2239 2239 - button:focus, 2240 2240 - [type="submit"]:focus, 2241 2241 - [type="button"]:focus, 2242 2242 - [role="button"]:focus 2243 2243 - ) 2244 2244 - select, 2245 2245 - .pico 2246 2246 - [role="group"]:has( 2247 2247 - button:focus, 2248 2248 - [type="submit"]:focus, 2249 2249 - [type="button"]:focus, 2250 2250 - [role="button"]:focus 2251 2251 - ) 2252 2252 - input:not([type="checkbox"], [type="radio"]), 2253 2253 - .pico 2254 2254 - [role="group"]:has( 2255 2255 - button:focus, 2256 2256 - [type="submit"]:focus, 2257 2257 - [type="button"]:focus, 2258 2258 - [role="button"]:focus 2259 2259 - ) 2260 2260 - select { 1978 1978 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1979 1979 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 1980 1980 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1981 1981 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2261 1982 border-color: transparent; 2262 1983 } 2263 2263 - .pico 2264 2264 - [role="search"]:has( 2265 2265 - input:not([type="submit"], [type="button"]):focus, 2266 2266 - select:focus 2267 2267 - ), 2268 2268 - .pico 2269 2269 - [role="group"]:has( 2270 2270 - input:not([type="submit"], [type="button"]):focus, 2271 2271 - select:focus 2272 2272 - ) { 1984 1984 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 1985 1985 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2273 1986 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2274 1987 } 2275 2275 - .pico 2276 2276 - [role="search"]:has( 2277 2277 - input:not([type="submit"], [type="button"]):focus, 2278 2278 - select:focus 2279 2279 - ) 2280 2280 - button, 2281 2281 - .pico 2282 2282 - [role="search"]:has( 2283 2283 - input:not([type="submit"], [type="button"]):focus, 2284 2284 - select:focus 2285 2285 - ) 2286 2286 - [type="submit"], 2287 2287 - .pico 2288 2288 - [role="search"]:has( 2289 2289 - input:not([type="submit"], [type="button"]):focus, 2290 2290 - select:focus 2291 2291 - ) 2292 2292 - [type="button"], 2293 2293 - .pico 2294 2294 - [role="search"]:has( 2295 2295 - input:not([type="submit"], [type="button"]):focus, 2296 2296 - select:focus 2297 2297 - ) 2298 2298 - [role="button"], 2299 2299 - .pico 2300 2300 - [role="group"]:has( 2301 2301 - input:not([type="submit"], [type="button"]):focus, 2302 2302 - select:focus 2303 2303 - ) 2304 2304 - button, 2305 2305 - .pico 2306 2306 - [role="group"]:has( 2307 2307 - input:not([type="submit"], [type="button"]):focus, 2308 2308 - select:focus 2309 2309 - ) 2310 2310 - [type="submit"], 2311 2311 - .pico 2312 2312 - [role="group"]:has( 2313 2313 - input:not([type="submit"], [type="button"]):focus, 2314 2314 - select:focus 2315 2315 - ) 2316 2316 - [type="button"], 2317 2317 - .pico 2318 2318 - [role="group"]:has( 2319 2319 - input:not([type="submit"], [type="button"]):focus, 2320 2320 - select:focus 2321 2321 - ) 2322 2322 - [role="button"] { 2323 2323 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2324 2324 - var(--pico-primary-border); 2325 2325 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2326 2326 - var(--pico-primary-hover-border); 1988 1988 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1989 1989 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1990 1990 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1991 1991 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 1992 1992 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1993 1993 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1994 1994 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1995 1995 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 1996 1996 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 1997 1997 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2327 1998 } 2328 1999 .pico [role="search"] button:focus, 2329 2000 .pico [role="search"] [type="submit"]:focus, ··· 2364 2035 content: ""; 2365 2036 vertical-align: -0.125em; 2366 2037 } 2367 2367 - .pico 2368 2368 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2369 2369 - :empty 2370 2370 - )::before { 2038 2038 + .pico [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2371 2039 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2372 2040 } 2373 2041 .pico [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2464 2132 opacity: 0.5; 2465 2133 transition: opacity var(--pico-transition); 2466 2134 } 2467 2467 - .pico 2468 2468 - dialog 2469 2469 - > article 2470 2470 - :is(a, button)[rel="prev"]:is( 2471 2471 - [aria-current]:not([aria-current="false"]), 2472 2472 - :hover, 2473 2473 - :active, 2474 2474 - :focus 2475 2475 - ) { 2135 2135 + .pico dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2476 2136 opacity: 1; 2477 2137 } 2478 2138 .pico dialog:not([open]), ··· 2515 2175 .pico nav li { 2516 2176 display: inline-block; 2517 2177 margin: 0; 2518 2518 - padding: var(--pico-nav-element-spacing-vertical) 2519 2519 - var(--pico-nav-element-spacing-horizontal); 2178 2178 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2520 2179 } 2521 2180 .pico nav li :where(a, [role="link"]) { 2522 2181 display: inline-block; 2523 2523 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2524 2524 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2525 2525 - padding: var(--pico-nav-link-spacing-vertical) 2526 2526 - var(--pico-nav-link-spacing-horizontal); 2182 2182 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2183 2183 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2527 2184 border-radius: var(--pico-border-radius); 2528 2185 } 2529 2186 .pico nav li :where(a, [role="link"]):not(:hover) { ··· 2532 2189 .pico nav li button, 2533 2190 .pico nav li [role="button"], 2534 2191 .pico nav li [type="button"], 2535 2535 - .pico 2536 2536 - nav 2537 2537 - li 2538 2538 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2192 2192 + .pico nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2539 2193 .pico nav li select { 2540 2194 height: auto; 2541 2195 margin-right: inherit; 2542 2196 margin-bottom: 0; 2543 2197 margin-left: inherit; 2544 2544 - padding: calc( 2545 2545 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2546 2546 - ) 2547 2547 - var(--pico-nav-link-spacing-horizontal); 2198 2198 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2548 2199 } 2549 2200 .pico nav[aria-label="breadcrumb"] { 2550 2201 align-items: center; ··· 2582 2233 display: block; 2583 2234 } 2584 2235 .pico aside li { 2585 2585 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 2586 2586 - var(--pico-nav-element-spacing-horizontal); 2236 2236 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 2587 2237 } 2588 2238 .pico aside li a { 2589 2239 display: block; ··· 2632 2282 } 2633 2283 @media (prefers-reduced-motion: no-preference) { 2634 2284 .pico progress:indeterminate { 2635 2635 - background: var(--pico-progress-background-color) 2636 2636 - linear-gradient( 2637 2637 - to right, 2638 2638 - var(--pico-progress-color) 30%, 2639 2639 - var(--pico-progress-background-color) 30% 2640 2640 - ) 2285 2285 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 2641 2286 top left/150% 150% no-repeat; 2642 2287 animation: progress-indeterminate 1s linear infinite; 2643 2288 }

+152 -449

public/css/pico.classless.green.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 31 28 --pico-form-element-spacing-vertical: 0.75rem; 32 29 --pico-form-element-spacing-horizontal: 1rem; 33 30 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 34 34 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 35 35 - var(--pico-primary-focus); 36 36 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 37 37 - var(--pico-form-element-border-color); 31 31 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 32 32 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 38 33 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 39 34 --pico-nav-element-spacing-vertical: 1rem; 40 35 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 153 148 --pico-font-weight: bolder; 154 149 } 155 150 156 156 - input:not( 157 157 - [type="submit"], 158 158 - [type="button"], 159 159 - [type="reset"], 160 160 - [type="checkbox"], 161 161 - [type="radio"], 162 162 - [type="file"] 163 163 - ), 151 151 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 164 152 :where(select, textarea) { 165 153 --pico-outline-width: 0.0625rem; 166 154 } ··· 197 185 filter: brightness(0) invert(1); 198 186 } 199 187 200 200 - [aria-busy="true"]:not(input, select, textarea):is( 201 201 - button, 202 202 - [type="submit"], 203 203 - [type="button"], 204 204 - [type="reset"], 205 205 - [role="button"] 206 206 - )::before { 188 188 + [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])::before { 207 189 filter: brightness(0) invert(1); 208 190 } 209 191 ··· 249 231 --pico-contrast-hover-underline: var(--pico-secondary-hover); 250 232 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 251 233 --pico-contrast-inverse: #fff; 252 252 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 253 253 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 254 254 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 255 255 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 256 256 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 257 257 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 258 258 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 234 234 + --pico-box-shadow: 235 235 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 236 236 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 237 237 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 259 238 --pico-h1-color: #2d3138; 260 239 --pico-h2-color: #373c44; 261 240 --pico-h3-color: #424751; ··· 287 266 --pico-form-element-disabled-opacity: 0.5; 288 267 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 289 268 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 290 290 - --pico-form-element-invalid-focus-color: var( 291 291 - --pico-form-element-invalid-active-border-color 292 292 - ); 269 269 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 293 270 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 294 271 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 295 295 - --pico-form-element-valid-focus-color: var( 296 296 - --pico-form-element-valid-active-border-color 297 297 - ); 272 272 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 298 273 --pico-switch-background-color: #bfc7d9; 299 274 --pico-switch-checked-background-color: var(--pico-primary-background); 300 275 --pico-switch-color: #fff; ··· 321 296 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 322 297 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 323 298 } 324 324 - [data-theme="light"] 325 325 - input:is( 326 326 - [type="submit"], 327 327 - [type="button"], 328 328 - [type="reset"], 329 329 - [type="checkbox"], 330 330 - [type="radio"], 331 331 - [type="file"] 332 332 - ), 333 333 - :root:not([data-theme="dark"]) 334 334 - input:is( 335 335 - [type="submit"], 336 336 - [type="button"], 337 337 - [type="reset"], 338 338 - [type="checkbox"], 339 339 - [type="radio"], 340 340 - [type="file"] 341 341 - ), 342 342 - :host(:not([data-theme="dark"])) 343 343 - input:is( 344 344 - [type="submit"], 345 345 - [type="button"], 346 346 - [type="reset"], 347 347 - [type="checkbox"], 348 348 - [type="radio"], 349 349 - [type="file"] 350 350 - ) { 299 299 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 300 300 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 301 301 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 351 302 --pico-form-element-focus-color: var(--pico-primary-focus); 352 303 } 353 304 ··· 390 341 --pico-contrast-hover-underline: var(--pico-contrast-hover); 391 342 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 392 343 --pico-contrast-inverse: #000; 393 393 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 394 394 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 395 395 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 396 396 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 397 397 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 398 398 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 344 344 + --pico-box-shadow: 345 345 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 346 346 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 347 347 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 399 348 --pico-h1-color: #f0f1f3; 400 349 --pico-h2-color: #e0e3e7; 401 350 --pico-h3-color: #c2c7d0; ··· 427 376 --pico-form-element-disabled-opacity: 0.5; 428 377 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 429 378 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 430 430 - --pico-form-element-invalid-focus-color: var( 431 431 - --pico-form-element-invalid-active-border-color 432 432 - ); 379 379 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 433 380 --pico-form-element-valid-border-color: #2a7b6f; 434 381 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 435 435 - --pico-form-element-valid-focus-color: var( 436 436 - --pico-form-element-valid-active-border-color 437 437 - ); 382 382 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 438 383 --pico-switch-background-color: #333c4e; 439 384 --pico-switch-checked-background-color: var(--pico-primary-background); 440 385 --pico-switch-color: #fff; ··· 461 406 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 462 407 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 463 408 } 464 464 - :root:not([data-theme]) 465 465 - input:is( 466 466 - [type="submit"], 467 467 - [type="button"], 468 468 - [type="reset"], 469 469 - [type="checkbox"], 470 470 - [type="radio"], 471 471 - [type="file"] 472 472 - ), 473 473 - :host(:not([data-theme])) 474 474 - input:is( 475 475 - [type="submit"], 476 476 - [type="button"], 477 477 - [type="reset"], 478 478 - [type="checkbox"], 479 479 - [type="radio"], 480 480 - [type="file"] 481 481 - ) { 409 409 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 410 410 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 482 411 --pico-form-element-focus-color: var(--pico-primary-focus); 483 412 } 484 413 } ··· 519 448 --pico-contrast-hover-underline: var(--pico-contrast-hover); 520 449 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 521 450 --pico-contrast-inverse: #000; 522 522 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 523 523 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 524 524 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 525 525 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 526 526 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 527 527 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 451 451 + --pico-box-shadow: 452 452 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 453 453 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 454 454 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 528 455 --pico-h1-color: #f0f1f3; 529 456 --pico-h2-color: #e0e3e7; 530 457 --pico-h3-color: #c2c7d0; ··· 556 483 --pico-form-element-disabled-opacity: 0.5; 557 484 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 558 485 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 559 559 - --pico-form-element-invalid-focus-color: var( 560 560 - --pico-form-element-invalid-active-border-color 561 561 - ); 486 486 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 562 487 --pico-form-element-valid-border-color: #2a7b6f; 563 488 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 564 564 - --pico-form-element-valid-focus-color: var( 565 565 - --pico-form-element-valid-active-border-color 566 566 - ); 489 489 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 567 490 --pico-switch-background-color: #333c4e; 568 491 --pico-switch-checked-background-color: var(--pico-primary-background); 569 492 --pico-switch-color: #fff; ··· 590 513 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 591 514 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 592 515 } 593 593 - [data-theme="dark"] 594 594 - input:is( 595 595 - [type="submit"], 596 596 - [type="button"], 597 597 - [type="reset"], 598 598 - [type="checkbox"], 599 599 - [type="radio"], 600 600 - [type="file"] 601 601 - ) { 516 516 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 602 517 --pico-form-element-focus-color: var(--pico-primary-focus); 603 518 } 604 519 ··· 789 704 --pico-color: var(--pico-h6-color); 790 705 } 791 706 792 792 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 793 793 - ~ :is(h1, h2, h3, h4, h5, h6) { 707 707 + :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 794 708 margin-top: var(--pico-typography-spacing-top); 795 709 } 796 710 ··· 883 797 text-decoration: var(--pico-text-decoration); 884 798 text-decoration-color: var(--pico-underline); 885 799 text-underline-offset: 0.125em; 886 886 - transition: background-color var(--pico-transition), 887 887 - color var(--pico-transition), box-shadow var(--pico-transition), 800 800 + transition: 801 801 + background-color var(--pico-transition), 802 802 + color var(--pico-transition), 803 803 + box-shadow var(--pico-transition), 888 804 -webkit-text-decoration var(--pico-transition); 889 889 - transition: background-color var(--pico-transition), 890 890 - color var(--pico-transition), text-decoration var(--pico-transition), 805 805 + transition: 806 806 + background-color var(--pico-transition), 807 807 + color var(--pico-transition), 808 808 + text-decoration var(--pico-transition), 891 809 box-shadow var(--pico-transition); 892 892 - transition: background-color var(--pico-transition), 893 893 - color var(--pico-transition), text-decoration var(--pico-transition), 810 810 + transition: 811 811 + background-color var(--pico-transition), 812 812 + color var(--pico-transition), 813 813 + text-decoration var(--pico-transition), 894 814 box-shadow var(--pico-transition), 895 815 -webkit-text-decoration var(--pico-transition); 896 816 } 897 897 - :where(a:not([role="button"])):is( 898 898 - [aria-current]:not([aria-current="false"]), 899 899 - :hover, 900 900 - :active, 901 901 - :focus 902 902 - ), 903 903 - [role="link"]:is( 904 904 - [aria-current]:not([aria-current="false"]), 905 905 - :hover, 906 906 - :active, 907 907 - :focus 908 908 - ) { 817 817 + :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 818 818 + [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 909 819 --pico-color: var(--pico-primary-hover); 910 820 --pico-underline: var(--pico-primary-hover-underline); 911 821 --pico-text-decoration: underline; ··· 946 856 --pico-border-color: var(--pico-primary-border); 947 857 --pico-color: var(--pico-primary-inverse); 948 858 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 949 949 - padding: var(--pico-form-element-spacing-vertical) 950 950 - var(--pico-form-element-spacing-horizontal); 859 859 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 951 860 border: var(--pico-border-width) solid var(--pico-border-color); 952 861 border-radius: var(--pico-border-radius); 953 862 outline: none; ··· 963 872 -webkit-user-select: none; 964 873 -moz-user-select: none; 965 874 user-select: none; 966 966 - transition: background-color var(--pico-transition), 967 967 - border-color var(--pico-transition), color var(--pico-transition), 875 875 + transition: 876 876 + background-color var(--pico-transition), 877 877 + border-color var(--pico-transition), 878 878 + color var(--pico-transition), 968 879 box-shadow var(--pico-transition); 969 880 } 970 881 button:is([aria-current]:not([aria-current="false"])), ··· 975 886 [type="reset"]:is(:hover, :active, :focus), 976 887 [type="button"]:is([aria-current]:not([aria-current="false"])), 977 888 [type="button"]:is(:hover, :active, :focus), 978 978 - [type="file"]::file-selector-button:is( 979 979 - [aria-current]:not([aria-current="false"]) 980 980 - ), 889 889 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 981 890 [type="file"]::file-selector-button:is(:hover, :active, :focus), 982 891 [role="button"]:is([aria-current]:not([aria-current="false"])), 983 892 [role="button"]:is(:hover, :active, :focus) { ··· 995 904 [type="button"]:focus, 996 905 [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 997 906 [type="file"]::file-selector-button:focus, 998 998 - [type="file"]::file-selector-button:is( 999 999 - [aria-current]:not([aria-current="false"]) 1000 1000 - ):focus, 907 907 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 1001 908 [role="button"]:focus, 1002 909 [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 1003 1003 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1004 1004 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 910 910 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1005 911 } 1006 912 1007 913 [type="submit"], ··· 1017 923 --pico-color: var(--pico-secondary-inverse); 1018 924 cursor: pointer; 1019 925 } 1020 1020 - [type="reset"]:is( 1021 1021 - [aria-current]:not([aria-current="false"]), 1022 1022 - :hover, 1023 1023 - :active, 1024 1024 - :focus 1025 1025 - ), 1026 1026 - [type="file"]::file-selector-button:is( 1027 1027 - [aria-current]:not([aria-current="false"]), 1028 1028 - :hover, 1029 1029 - :active, 1030 1030 - :focus 1031 1031 - ) { 926 926 + [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 927 927 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1032 928 --pico-background-color: var(--pico-secondary-hover-background); 1033 929 --pico-border-color: var(--pico-secondary-hover-border); 1034 930 --pico-color: var(--pico-secondary-inverse); 1035 931 } 1036 932 [type="reset"]:focus, 1037 933 [type="file"]::file-selector-button:focus { 1038 1038 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1039 1039 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 934 934 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1040 935 } 1041 936 1042 1042 - :where( 1043 1043 - button, 1044 1044 - [type="submit"], 1045 1045 - [type="reset"], 1046 1046 - [type="button"], 1047 1047 - [role="button"] 1048 1048 - )[disabled], 1049 1049 - :where(fieldset[disabled]) 1050 1050 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 937 937 + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 938 938 + :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1051 939 opacity: 0.5; 1052 940 pointer-events: none; 1053 941 } ··· 1293 1181 } 1294 1182 1295 1183 input:not([type="checkbox"], [type="radio"], [type="range"]) { 1296 1296 - height: calc( 1297 1297 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1298 1298 - var(--pico-border-width) * 2 1299 1299 - ); 1184 1184 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1300 1185 } 1301 1186 1302 1187 fieldset { ··· 1332 1217 -webkit-appearance: none; 1333 1218 -moz-appearance: none; 1334 1219 appearance: none; 1335 1335 - padding: var(--pico-form-element-spacing-vertical) 1336 1336 - var(--pico-form-element-spacing-horizontal); 1220 1220 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1337 1221 } 1338 1222 1339 1223 input, ··· 1350 1234 box-shadow: var(--pico-box-shadow); 1351 1235 color: var(--pico-color); 1352 1236 font-weight: var(--pico-font-weight); 1353 1353 - transition: background-color var(--pico-transition), 1354 1354 - border-color var(--pico-transition), color var(--pico-transition), 1237 1237 + transition: 1238 1238 + background-color var(--pico-transition), 1239 1239 + border-color var(--pico-transition), 1240 1240 + color var(--pico-transition), 1355 1241 box-shadow var(--pico-transition); 1356 1242 } 1357 1243 1358 1358 - input:not( 1359 1359 - [type="submit"], 1360 1360 - [type="button"], 1361 1361 - [type="reset"], 1362 1362 - [type="checkbox"], 1363 1363 - [type="radio"], 1364 1364 - [readonly] 1365 1365 - ):is(:active, :focus), 1244 1244 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1366 1245 :where(select, textarea):not([readonly]):is(:active, :focus) { 1367 1246 --pico-background-color: var(--pico-form-element-active-background-color); 1368 1247 } 1369 1248 1370 1370 - input:not( 1371 1371 - [type="submit"], 1372 1372 - [type="button"], 1373 1373 - [type="reset"], 1374 1374 - [role="switch"], 1375 1375 - [readonly] 1376 1376 - ):is(:active, :focus), 1249 1249 + input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1377 1250 :where(select, textarea):not([readonly]):is(:active, :focus) { 1378 1251 --pico-border-color: var(--pico-form-element-active-border-color); 1379 1252 } 1380 1253 1381 1381 - input:not( 1382 1382 - [type="submit"], 1383 1383 - [type="button"], 1384 1384 - [type="reset"], 1385 1385 - [type="range"], 1386 1386 - [type="file"], 1387 1387 - [readonly] 1388 1388 - ):focus, 1254 1254 + input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1389 1255 :where(select, textarea):not([readonly]):focus { 1390 1390 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1391 1391 - var(--pico-form-element-focus-color); 1256 1256 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1392 1257 } 1393 1258 1394 1259 input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1395 1260 select[disabled], 1396 1261 textarea[disabled], 1397 1262 label[aria-disabled="true"], 1398 1398 - :where(fieldset[disabled]) 1399 1399 - :is( 1400 1400 - input:not([type="submit"], [type="button"], [type="reset"]), 1401 1401 - select, 1402 1402 - textarea 1403 1403 - ) { 1263 1263 + :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1404 1264 opacity: var(--pico-form-element-disabled-opacity); 1405 1265 pointer-events: none; 1406 1266 } ··· 1419 1279 [type="week"], 1420 1280 [type="range"] 1421 1281 )[aria-invalid] { 1422 1422 - padding-right: calc( 1423 1423 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1424 1424 - ) !important; 1282 1282 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1425 1283 padding-left: var(--pico-form-element-spacing-horizontal); 1426 1284 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1427 1427 - padding-inline-end: calc( 1428 1428 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1429 1429 - ) !important; 1285 1285 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1430 1286 background-position: center right 0.75rem; 1431 1287 background-size: 1rem auto; 1432 1288 background-repeat: no-repeat; ··· 1459 1315 --pico-border-color: var(--pico-form-element-valid-border-color); 1460 1316 } 1461 1317 :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1462 1462 - --pico-border-color: var( 1463 1463 - --pico-form-element-valid-active-border-color 1464 1464 - ) !important; 1318 1318 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1465 1319 } 1466 1466 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1467 1467 - [type="checkbox"], 1468 1468 - [type="radio"] 1469 1469 - ) { 1470 1470 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1471 1471 - var(--pico-form-element-valid-focus-color) !important; 1320 1320 + :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1321 1321 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1472 1322 } 1473 1323 :where(input, select, textarea)[aria-invalid="true"] { 1474 1324 --pico-border-color: var(--pico-form-element-invalid-border-color); 1475 1325 } 1476 1326 :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1477 1477 - --pico-border-color: var( 1478 1478 - --pico-form-element-invalid-active-border-color 1479 1479 - ) !important; 1327 1327 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1480 1328 } 1481 1481 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1482 1482 - [type="checkbox"], 1483 1483 - [type="radio"] 1484 1484 - ) { 1485 1485 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1486 1486 - var(--pico-form-element-invalid-focus-color) !important; 1329 1329 + :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1330 1330 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1487 1331 } 1488 1332 1489 1489 - [dir="rtl"] 1490 1490 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1491 1491 - [aria-invalid], 1492 1492 - [aria-invalid="true"], 1493 1493 - [aria-invalid="false"] 1494 1494 - ) { 1333 1333 + [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1495 1334 background-position: center left 0.75rem; 1496 1335 } 1497 1336 ··· 1538 1377 resize: vertical; 1539 1378 } 1540 1379 textarea[aria-invalid] { 1541 1541 - --pico-icon-height: calc( 1542 1542 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1543 1543 - var(--pico-border-width) * 2 1544 1544 - ); 1380 1380 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1545 1381 background-position: top right 0.75rem !important; 1546 1382 background-size: 1rem var(--pico-icon-height) !important; 1547 1383 } ··· 1749 1585 background-size: var(--pico-icon-width) auto; 1750 1586 background-repeat: no-repeat; 1751 1587 } 1752 1752 - input:not( 1753 1753 - [type="checkbox"], 1754 1754 - [type="radio"], 1755 1755 - [type="range"], 1756 1756 - [type="file"] 1757 1757 - )[type="time"] { 1588 1588 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 1758 1589 background-image: var(--pico-icon-time); 1759 1590 } 1760 1591 ··· 1779 1610 background-image: none !important; 1780 1611 } 1781 1612 } 1782 1782 - [dir="rtl"] 1783 1783 - :is( 1784 1784 - [type="date"], 1785 1785 - [type="datetime-local"], 1786 1786 - [type="month"], 1787 1787 - [type="time"], 1788 1788 - [type="week"] 1789 1789 - ) { 1613 1613 + [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 1790 1614 text-align: right; 1791 1615 } 1792 1616 ··· 1804 1628 } 1805 1629 [type="file"]::file-selector-button { 1806 1630 margin-right: calc(var(--pico-spacing) / 2); 1807 1807 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 1808 1808 - var(--pico-form-element-spacing-horizontal); 1631 1631 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 1809 1632 } 1810 1633 [type="file"]:is(:hover, :active, :focus)::file-selector-button { 1811 1634 --pico-background-color: var(--pico-secondary-hover-background); 1812 1635 --pico-border-color: var(--pico-secondary-hover-border); 1813 1636 } 1814 1637 [type="file"]:focus::file-selector-button { 1815 1815 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1816 1816 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1638 1638 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1817 1639 } 1818 1640 1819 1641 /** ··· 1832 1654 height: 0.375rem; 1833 1655 border-radius: var(--pico-border-radius); 1834 1656 background-color: var(--pico-range-border-color); 1835 1835 - -webkit-transition: background-color var(--pico-transition), 1657 1657 + -webkit-transition: 1658 1658 + background-color var(--pico-transition), 1836 1659 box-shadow var(--pico-transition); 1837 1837 - transition: background-color var(--pico-transition), 1660 1660 + transition: 1661 1661 + background-color var(--pico-transition), 1838 1662 box-shadow var(--pico-transition); 1839 1663 } 1840 1664 [type="range"]::-moz-range-track { ··· 1842 1666 height: 0.375rem; 1843 1667 border-radius: var(--pico-border-radius); 1844 1668 background-color: var(--pico-range-border-color); 1845 1845 - -moz-transition: background-color var(--pico-transition), 1669 1669 + -moz-transition: 1670 1670 + background-color var(--pico-transition), 1846 1671 box-shadow var(--pico-transition); 1847 1847 - transition: background-color var(--pico-transition), 1672 1672 + transition: 1673 1673 + background-color var(--pico-transition), 1848 1674 box-shadow var(--pico-transition); 1849 1675 } 1850 1676 [type="range"]::-ms-track { ··· 1852 1678 height: 0.375rem; 1853 1679 border-radius: var(--pico-border-radius); 1854 1680 background-color: var(--pico-range-border-color); 1855 1855 - -ms-transition: background-color var(--pico-transition), 1681 1681 + -ms-transition: 1682 1682 + background-color var(--pico-transition), 1856 1683 box-shadow var(--pico-transition); 1857 1857 - transition: background-color var(--pico-transition), 1684 1684 + transition: 1685 1685 + background-color var(--pico-transition), 1858 1686 box-shadow var(--pico-transition); 1859 1687 } 1860 1688 [type="range"]::-webkit-slider-thumb { ··· 1866 1694 border-radius: 50%; 1867 1695 background-color: var(--pico-range-thumb-color); 1868 1696 cursor: pointer; 1869 1869 - -webkit-transition: background-color var(--pico-transition), 1697 1697 + -webkit-transition: 1698 1698 + background-color var(--pico-transition), 1870 1699 transform var(--pico-transition); 1871 1871 - transition: background-color var(--pico-transition), 1700 1700 + transition: 1701 1701 + background-color var(--pico-transition), 1872 1702 transform var(--pico-transition); 1873 1703 } 1874 1704 [type="range"]::-moz-range-thumb { ··· 1880 1710 border-radius: 50%; 1881 1711 background-color: var(--pico-range-thumb-color); 1882 1712 cursor: pointer; 1883 1883 - -moz-transition: background-color var(--pico-transition), 1713 1713 + -moz-transition: 1714 1714 + background-color var(--pico-transition), 1884 1715 transform var(--pico-transition); 1885 1885 - transition: background-color var(--pico-transition), 1716 1716 + transition: 1717 1717 + background-color var(--pico-transition), 1886 1718 transform var(--pico-transition); 1887 1719 } 1888 1720 [type="range"]::-ms-thumb { ··· 1894 1726 border-radius: 50%; 1895 1727 background-color: var(--pico-range-thumb-color); 1896 1728 cursor: pointer; 1897 1897 - -ms-transition: background-color var(--pico-transition), 1729 1729 + -ms-transition: 1730 1730 + background-color var(--pico-transition), 1898 1731 transform var(--pico-transition); 1899 1899 - transition: background-color var(--pico-transition), 1732 1732 + transition: 1733 1733 + background-color var(--pico-transition), 1900 1734 transform var(--pico-transition); 1901 1735 } 1902 1736 [type="range"]:active, ··· 1917 1751 /** 1918 1752 * Input type search 1919 1753 */ 1920 1920 - input:not( 1921 1921 - [type="checkbox"], 1922 1922 - [type="radio"], 1923 1923 - [type="range"], 1924 1924 - [type="file"] 1925 1925 - )[type="search"] { 1926 1926 - padding-inline-start: calc( 1927 1927 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1928 1928 - ); 1754 1754 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1755 1755 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 1929 1756 background-image: var(--pico-icon-search); 1930 1930 - background-position: center left 1931 1931 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1757 1757 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1932 1758 background-size: 1rem auto; 1933 1759 background-repeat: no-repeat; 1934 1760 } 1935 1935 - input:not( 1936 1936 - [type="checkbox"], 1937 1937 - [type="radio"], 1938 1938 - [type="range"], 1939 1939 - [type="file"] 1940 1940 - )[type="search"][aria-invalid] { 1941 1941 - padding-inline-start: calc( 1942 1942 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1943 1943 - ) !important; 1944 1944 - background-position: center left 1.125rem, center right 0.75rem; 1761 1761 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1762 1762 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1763 1763 + background-position: 1764 1764 + center left 1.125rem, 1765 1765 + center right 0.75rem; 1945 1766 } 1946 1946 - input:not( 1947 1947 - [type="checkbox"], 1948 1948 - [type="radio"], 1949 1949 - [type="range"], 1950 1950 - [type="file"] 1951 1951 - )[type="search"][aria-invalid="false"] { 1767 1767 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 1952 1768 background-image: var(--pico-icon-search), var(--pico-icon-valid); 1953 1769 } 1954 1954 - input:not( 1955 1955 - [type="checkbox"], 1956 1956 - [type="radio"], 1957 1957 - [type="range"], 1958 1958 - [type="file"] 1959 1959 - )[type="search"][aria-invalid="true"] { 1770 1770 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 1960 1771 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 1961 1772 } 1962 1773 1963 1963 - [dir="rtl"] 1964 1964 - :where(input):not( 1965 1965 - [type="checkbox"], 1966 1966 - [type="radio"], 1967 1967 - [type="range"], 1968 1968 - [type="file"] 1969 1969 - )[type="search"] { 1774 1774 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1970 1775 background-position: center right 1.125rem; 1971 1776 } 1972 1972 - [dir="rtl"] 1973 1973 - :where(input):not( 1974 1974 - [type="checkbox"], 1975 1975 - [type="radio"], 1976 1976 - [type="range"], 1977 1977 - [type="file"] 1978 1978 - )[type="search"][aria-invalid] { 1979 1979 - background-position: center right 1.125rem, center left 0.75rem; 1777 1777 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1778 1778 + background-position: 1779 1779 + center right 1.125rem, 1780 1780 + center left 0.75rem; 1980 1781 } 1981 1782 1982 1783 /** ··· 2068 1869 article > footer { 2069 1870 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2070 1871 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2071 2071 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2072 2072 - var(--pico-block-spacing-horizontal); 1872 1872 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2073 1873 background-color: var(--pico-card-sectioning-background-color); 2074 1874 } 2075 1875 article > header { ··· 2167 1967 width: auto; 2168 1968 } 2169 1969 @supports selector(:has(*)) { 2170 2170 - [role="search"]:has( 2171 2171 - button:focus, 2172 2172 - [type="submit"]:focus, 2173 2173 - [type="button"]:focus, 2174 2174 - [role="button"]:focus 2175 2175 - ), 2176 2176 - [role="group"]:has( 2177 2177 - button:focus, 2178 2178 - [type="submit"]:focus, 2179 2179 - [type="button"]:focus, 2180 2180 - [role="button"]:focus 2181 2181 - ) { 1970 1970 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 1971 1971 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2182 1972 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2183 1973 } 2184 2184 - [role="search"]:has( 2185 2185 - button:focus, 2186 2186 - [type="submit"]:focus, 2187 2187 - [type="button"]:focus, 2188 2188 - [role="button"]:focus 2189 2189 - ) 2190 2190 - input:not([type="checkbox"], [type="radio"]), 2191 2191 - [role="search"]:has( 2192 2192 - button:focus, 2193 2193 - [type="submit"]:focus, 2194 2194 - [type="button"]:focus, 2195 2195 - [role="button"]:focus 2196 2196 - ) 2197 2197 - select, 2198 2198 - [role="group"]:has( 2199 2199 - button:focus, 2200 2200 - [type="submit"]:focus, 2201 2201 - [type="button"]:focus, 2202 2202 - [role="button"]:focus 2203 2203 - ) 2204 2204 - input:not([type="checkbox"], [type="radio"]), 2205 2205 - [role="group"]:has( 2206 2206 - button:focus, 2207 2207 - [type="submit"]:focus, 2208 2208 - [type="button"]:focus, 2209 2209 - [role="button"]:focus 2210 2210 - ) 2211 2211 - select { 1974 1974 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1975 1975 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 1976 1976 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1977 1977 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2212 1978 border-color: transparent; 2213 1979 } 2214 2214 - [role="search"]:has( 2215 2215 - input:not([type="submit"], [type="button"]):focus, 2216 2216 - select:focus 2217 2217 - ), 2218 2218 - [role="group"]:has( 2219 2219 - input:not([type="submit"], [type="button"]):focus, 2220 2220 - select:focus 2221 2221 - ) { 1980 1980 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 1981 1981 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2222 1982 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2223 1983 } 2224 2224 - [role="search"]:has( 2225 2225 - input:not([type="submit"], [type="button"]):focus, 2226 2226 - select:focus 2227 2227 - ) 2228 2228 - button, 2229 2229 - [role="search"]:has( 2230 2230 - input:not([type="submit"], [type="button"]):focus, 2231 2231 - select:focus 2232 2232 - ) 2233 2233 - [type="submit"], 2234 2234 - [role="search"]:has( 2235 2235 - input:not([type="submit"], [type="button"]):focus, 2236 2236 - select:focus 2237 2237 - ) 2238 2238 - [type="button"], 2239 2239 - [role="search"]:has( 2240 2240 - input:not([type="submit"], [type="button"]):focus, 2241 2241 - select:focus 2242 2242 - ) 2243 2243 - [role="button"], 2244 2244 - [role="group"]:has( 2245 2245 - input:not([type="submit"], [type="button"]):focus, 2246 2246 - select:focus 2247 2247 - ) 2248 2248 - button, 2249 2249 - [role="group"]:has( 2250 2250 - input:not([type="submit"], [type="button"]):focus, 2251 2251 - select:focus 2252 2252 - ) 2253 2253 - [type="submit"], 2254 2254 - [role="group"]:has( 2255 2255 - input:not([type="submit"], [type="button"]):focus, 2256 2256 - select:focus 2257 2257 - ) 2258 2258 - [type="button"], 2259 2259 - [role="group"]:has( 2260 2260 - input:not([type="submit"], [type="button"]):focus, 2261 2261 - select:focus 2262 2262 - ) 2263 2263 - [role="button"] { 2264 2264 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2265 2265 - var(--pico-primary-border); 2266 2266 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2267 2267 - var(--pico-primary-hover-border); 1984 1984 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1985 1985 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1986 1986 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1987 1987 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 1988 1988 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1989 1989 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1990 1990 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1991 1991 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 1992 1992 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 1993 1993 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2268 1994 } 2269 1995 [role="search"] button:focus, 2270 1996 [role="search"] [type="submit"]:focus, ··· 2305 2031 content: ""; 2306 2032 vertical-align: -0.125em; 2307 2033 } 2308 2308 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2309 2309 - :empty 2310 2310 - )::before { 2034 2034 + [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2311 2035 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2312 2036 } 2313 2037 [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2404 2128 opacity: 0.5; 2405 2129 transition: opacity var(--pico-transition); 2406 2130 } 2407 2407 - dialog 2408 2408 - > article 2409 2409 - :is(a, button)[rel="prev"]:is( 2410 2410 - [aria-current]:not([aria-current="false"]), 2411 2411 - :hover, 2412 2412 - :active, 2413 2413 - :focus 2414 2414 - ) { 2131 2131 + dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2415 2132 opacity: 1; 2416 2133 } 2417 2134 dialog:not([open]), ··· 2454 2171 nav li { 2455 2172 display: inline-block; 2456 2173 margin: 0; 2457 2457 - padding: var(--pico-nav-element-spacing-vertical) 2458 2458 - var(--pico-nav-element-spacing-horizontal); 2174 2174 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2459 2175 } 2460 2176 nav li :where(a, [role="link"]) { 2461 2177 display: inline-block; 2462 2462 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2463 2463 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2464 2464 - padding: var(--pico-nav-link-spacing-vertical) 2465 2465 - var(--pico-nav-link-spacing-horizontal); 2178 2178 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2179 2179 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2466 2180 border-radius: var(--pico-border-radius); 2467 2181 } 2468 2182 nav li :where(a, [role="link"]):not(:hover) { ··· 2471 2185 nav li button, 2472 2186 nav li [role="button"], 2473 2187 nav li [type="button"], 2474 2474 - nav 2475 2475 - li 2476 2476 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2188 2188 + nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2477 2189 nav li select { 2478 2190 height: auto; 2479 2191 margin-right: inherit; 2480 2192 margin-bottom: 0; 2481 2193 margin-left: inherit; 2482 2482 - padding: calc( 2483 2483 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2484 2484 - ) 2485 2485 - var(--pico-nav-link-spacing-horizontal); 2194 2194 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2486 2195 } 2487 2196 nav[aria-label="breadcrumb"] { 2488 2197 align-items: center; ··· 2520 2229 display: block; 2521 2230 } 2522 2231 aside li { 2523 2523 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 2524 2524 - var(--pico-nav-element-spacing-horizontal); 2232 2232 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 2525 2233 } 2526 2234 aside li a { 2527 2235 display: block; ··· 2570 2278 } 2571 2279 @media (prefers-reduced-motion: no-preference) { 2572 2280 progress:indeterminate { 2573 2573 - background: var(--pico-progress-background-color) 2574 2574 - linear-gradient( 2575 2575 - to right, 2576 2576 - var(--pico-progress-color) 30%, 2577 2577 - var(--pico-progress-background-color) 30% 2578 2578 - ) 2281 2281 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 2579 2282 top left/150% 150% no-repeat; 2580 2283 animation: progress-indeterminate 1s linear infinite; 2581 2284 }

+220 -738

public/css/pico.conditional.green.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 33 30 --pico-form-element-spacing-vertical: 0.75rem; 34 31 --pico-form-element-spacing-horizontal: 1rem; 35 32 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 36 36 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 37 37 - var(--pico-primary-focus); 38 38 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 39 39 - var(--pico-form-element-border-color); 33 33 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 34 34 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 40 35 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 41 36 --pico-nav-element-spacing-vertical: 1rem; 42 37 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 159 154 --pico-font-weight: bolder; 160 155 } 161 156 162 162 - input:not( 163 163 - [type="submit"], 164 164 - [type="button"], 165 165 - [type="reset"], 166 166 - [type="checkbox"], 167 167 - [type="radio"], 168 168 - [type="file"] 169 169 - ), 157 157 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 170 158 :where(select, textarea) { 171 159 --pico-outline-width: 0.0625rem; 172 160 } ··· 196 184 --pico-border-radius: 5rem; 197 185 } 198 186 199 199 - [role="search"]:has( 200 200 - button.secondary:focus, 201 201 - [type="submit"].secondary:focus, 202 202 - [type="button"].secondary:focus, 203 203 - [role="button"].secondary:focus 204 204 - ), 205 205 - [role="group"]:has( 206 206 - button.secondary:focus, 207 207 - [type="submit"].secondary:focus, 208 208 - [type="button"].secondary:focus, 209 209 - [role="button"].secondary:focus 210 210 - ) { 211 211 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 212 212 - var(--pico-secondary-focus); 187 187 + [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), 188 188 + [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) { 189 189 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 213 190 } 214 214 - [role="search"]:has( 215 215 - button.contrast:focus, 216 216 - [type="submit"].contrast:focus, 217 217 - [type="button"].contrast:focus, 218 218 - [role="button"].contrast:focus 219 219 - ), 220 220 - [role="group"]:has( 221 221 - button.contrast:focus, 222 222 - [type="submit"].contrast:focus, 223 223 - [type="button"].contrast:focus, 224 224 - [role="button"].contrast:focus 225 225 - ) { 226 226 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 227 227 - var(--pico-contrast-focus); 191 191 + [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), 192 192 + [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) { 193 193 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 228 194 } 229 195 [role="search"] button, 230 196 [role="search"] [type="submit"], ··· 241 207 filter: brightness(0) invert(1); 242 208 } 243 209 244 244 - .pico 245 245 - [aria-busy="true"]:not(input, select, textarea):is( 246 246 - button, 247 247 - [type="submit"], 248 248 - [type="button"], 249 249 - [type="reset"], 250 250 - [role="button"] 251 251 - ):not(.outline)::before { 210 210 + .pico [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline)::before { 252 211 filter: brightness(0) invert(1); 253 212 } 254 213 ··· 294 253 --pico-contrast-hover-underline: var(--pico-secondary-hover); 295 254 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 296 255 --pico-contrast-inverse: #fff; 297 297 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 298 298 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 299 299 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 300 300 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 301 301 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 302 302 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 303 303 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 256 256 + --pico-box-shadow: 257 257 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 258 258 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 259 259 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 304 260 --pico-h1-color: #2d3138; 305 261 --pico-h2-color: #373c44; 306 262 --pico-h3-color: #424751; ··· 332 288 --pico-form-element-disabled-opacity: 0.5; 333 289 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 334 290 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 335 335 - --pico-form-element-invalid-focus-color: var( 336 336 - --pico-form-element-invalid-active-border-color 337 337 - ); 291 291 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 338 292 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 339 293 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 340 340 - --pico-form-element-valid-focus-color: var( 341 341 - --pico-form-element-valid-active-border-color 342 342 - ); 294 294 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 343 295 --pico-switch-background-color: #bfc7d9; 344 296 --pico-switch-checked-background-color: var(--pico-primary-background); 345 297 --pico-switch-color: #fff; ··· 371 323 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 372 324 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 373 325 } 374 374 - [data-theme="light"] 375 375 - input:is( 376 376 - [type="submit"], 377 377 - [type="button"], 378 378 - [type="reset"], 379 379 - [type="checkbox"], 380 380 - [type="radio"], 381 381 - [type="file"] 382 382 - ), 383 383 - :root:not([data-theme="dark"]) 384 384 - input:is( 385 385 - [type="submit"], 386 386 - [type="button"], 387 387 - [type="reset"], 388 388 - [type="checkbox"], 389 389 - [type="radio"], 390 390 - [type="file"] 391 391 - ), 392 392 - :host(:not([data-theme="dark"])) 393 393 - input:is( 394 394 - [type="submit"], 395 395 - [type="button"], 396 396 - [type="reset"], 397 397 - [type="checkbox"], 398 398 - [type="radio"], 399 399 - [type="file"] 400 400 - ) { 326 326 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 327 327 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 328 328 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 401 329 --pico-form-element-focus-color: var(--pico-primary-focus); 402 330 } 403 331 ··· 440 368 --pico-contrast-hover-underline: var(--pico-contrast-hover); 441 369 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 442 370 --pico-contrast-inverse: #000; 443 443 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 444 444 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 445 445 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 446 446 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 447 447 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 448 448 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 371 371 + --pico-box-shadow: 372 372 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 373 373 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 374 374 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 449 375 --pico-h1-color: #f0f1f3; 450 376 --pico-h2-color: #e0e3e7; 451 377 --pico-h3-color: #c2c7d0; ··· 477 403 --pico-form-element-disabled-opacity: 0.5; 478 404 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 479 405 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 480 480 - --pico-form-element-invalid-focus-color: var( 481 481 - --pico-form-element-invalid-active-border-color 482 482 - ); 406 406 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 483 407 --pico-form-element-valid-border-color: #2a7b6f; 484 408 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 485 485 - --pico-form-element-valid-focus-color: var( 486 486 - --pico-form-element-valid-active-border-color 487 487 - ); 409 409 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 488 410 --pico-switch-background-color: #333c4e; 489 411 --pico-switch-checked-background-color: var(--pico-primary-background); 490 412 --pico-switch-color: #fff; ··· 516 438 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 517 439 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 518 440 } 519 519 - :root:not([data-theme]) 520 520 - input:is( 521 521 - [type="submit"], 522 522 - [type="button"], 523 523 - [type="reset"], 524 524 - [type="checkbox"], 525 525 - [type="radio"], 526 526 - [type="file"] 527 527 - ), 528 528 - :host(:not([data-theme])) 529 529 - input:is( 530 530 - [type="submit"], 531 531 - [type="button"], 532 532 - [type="reset"], 533 533 - [type="checkbox"], 534 534 - [type="radio"], 535 535 - [type="file"] 536 536 - ) { 441 441 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 442 442 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 537 443 --pico-form-element-focus-color: var(--pico-primary-focus); 538 444 } 539 539 - :root:not([data-theme]) 540 540 - .pico 541 541 - details 542 542 - summary[role="button"].contrast:not(.outline)::after, 543 543 - :host(:not([data-theme])) 544 544 - .pico 545 545 - details 546 546 - summary[role="button"].contrast:not(.outline)::after { 445 445 + :root:not([data-theme]) .pico details summary[role="button"].contrast:not(.outline)::after, 446 446 + :host(:not([data-theme])) .pico details summary[role="button"].contrast:not(.outline)::after { 547 447 filter: brightness(0); 548 448 } 549 449 :root:not([data-theme]) 550 450 .pico 551 551 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 552 552 - button, 553 553 - [type="submit"], 554 554 - [type="button"], 555 555 - [type="reset"], 556 556 - [role="button"] 557 557 - ):not(.outline)::before, 451 451 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 452 452 + .outline 453 453 + )::before, 558 454 :host(:not([data-theme])) 559 455 .pico 560 560 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 561 561 - button, 562 562 - [type="submit"], 563 563 - [type="button"], 564 564 - [type="reset"], 565 565 - [role="button"] 566 566 - ):not(.outline)::before { 456 456 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 457 457 + .outline 458 458 + )::before { 567 459 filter: brightness(0); 568 460 } 569 461 } ··· 604 496 --pico-contrast-hover-underline: var(--pico-contrast-hover); 605 497 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 606 498 --pico-contrast-inverse: #000; 607 607 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 608 608 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 609 609 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 610 610 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 611 611 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 612 612 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 499 499 + --pico-box-shadow: 500 500 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 501 501 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 502 502 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 613 503 --pico-h1-color: #f0f1f3; 614 504 --pico-h2-color: #e0e3e7; 615 505 --pico-h3-color: #c2c7d0; ··· 641 531 --pico-form-element-disabled-opacity: 0.5; 642 532 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 643 533 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 644 644 - --pico-form-element-invalid-focus-color: var( 645 645 - --pico-form-element-invalid-active-border-color 646 646 - ); 534 534 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 647 535 --pico-form-element-valid-border-color: #2a7b6f; 648 536 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 649 649 - --pico-form-element-valid-focus-color: var( 650 650 - --pico-form-element-valid-active-border-color 651 651 - ); 537 537 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 652 538 --pico-switch-background-color: #333c4e; 653 539 --pico-switch-checked-background-color: var(--pico-primary-background); 654 540 --pico-switch-color: #fff; ··· 680 566 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 681 567 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 682 568 } 683 683 - [data-theme="dark"] 684 684 - input:is( 685 685 - [type="submit"], 686 686 - [type="button"], 687 687 - [type="reset"], 688 688 - [type="checkbox"], 689 689 - [type="radio"], 690 690 - [type="file"] 691 691 - ) { 569 569 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 692 570 --pico-form-element-focus-color: var(--pico-primary-focus); 693 571 } 694 694 - [data-theme="dark"] 695 695 - .pico 696 696 - details 697 697 - summary[role="button"].contrast:not(.outline)::after { 572 572 + [data-theme="dark"] .pico details summary[role="button"].contrast:not(.outline)::after { 698 573 filter: brightness(0); 699 574 } 700 575 [data-theme="dark"] 701 576 .pico 702 702 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 703 703 - button, 704 704 - [type="submit"], 705 705 - [type="button"], 706 706 - [type="reset"], 707 707 - [role="button"] 708 708 - ):not(.outline)::before { 577 577 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 578 578 + .outline 579 579 + )::before { 709 580 filter: brightness(0); 710 581 } 711 582 ··· 922 793 --pico-color: var(--pico-h6-color); 923 794 } 924 795 925 925 - .pico 926 926 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 927 927 - ~ :is(h1, h2, h3, h4, h5, h6) { 796 796 + .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 928 797 margin-top: var(--pico-typography-spacing-top); 929 798 } 930 799 ··· 1017 886 text-decoration: var(--pico-text-decoration); 1018 887 text-decoration-color: var(--pico-underline); 1019 888 text-underline-offset: 0.125em; 1020 1020 - transition: background-color var(--pico-transition), 1021 1021 - color var(--pico-transition), box-shadow var(--pico-transition), 889 889 + transition: 890 890 + background-color var(--pico-transition), 891 891 + color var(--pico-transition), 892 892 + box-shadow var(--pico-transition), 1022 893 -webkit-text-decoration var(--pico-transition); 1023 1023 - transition: background-color var(--pico-transition), 1024 1024 - color var(--pico-transition), text-decoration var(--pico-transition), 894 894 + transition: 895 895 + background-color var(--pico-transition), 896 896 + color var(--pico-transition), 897 897 + text-decoration var(--pico-transition), 1025 898 box-shadow var(--pico-transition); 1026 1026 - transition: background-color var(--pico-transition), 1027 1027 - color var(--pico-transition), text-decoration var(--pico-transition), 899 899 + transition: 900 900 + background-color var(--pico-transition), 901 901 + color var(--pico-transition), 902 902 + text-decoration var(--pico-transition), 1028 903 box-shadow var(--pico-transition), 1029 904 -webkit-text-decoration var(--pico-transition); 1030 905 } 1031 1031 - .pico 1032 1032 - :where(a:not([role="button"])):is( 1033 1033 - [aria-current]:not([aria-current="false"]), 1034 1034 - :hover, 1035 1035 - :active, 1036 1036 - :focus 1037 1037 - ), 1038 1038 - .pico 1039 1039 - [role="link"]:is( 1040 1040 - [aria-current]:not([aria-current="false"]), 1041 1041 - :hover, 1042 1042 - :active, 1043 1043 - :focus 1044 1044 - ) { 906 906 + .pico :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 907 907 + .pico [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1045 908 --pico-color: var(--pico-primary-hover); 1046 909 --pico-underline: var(--pico-primary-hover-underline); 1047 910 --pico-text-decoration: underline; ··· 1055 918 --pico-color: var(--pico-secondary); 1056 919 --pico-underline: var(--pico-secondary-underline); 1057 920 } 1058 1058 - .pico 1059 1059 - :where(a:not([role="button"])).secondary:is( 1060 1060 - [aria-current]:not([aria-current="false"]), 1061 1061 - :hover, 1062 1062 - :active, 1063 1063 - :focus 1064 1064 - ), 1065 1065 - .pico 1066 1066 - [role="link"].secondary:is( 1067 1067 - [aria-current]:not([aria-current="false"]), 1068 1068 - :hover, 1069 1069 - :active, 1070 1070 - :focus 1071 1071 - ) { 921 921 + .pico :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 922 922 + .pico [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1072 923 --pico-color: var(--pico-secondary-hover); 1073 924 --pico-underline: var(--pico-secondary-hover-underline); 1074 925 } ··· 1077 928 --pico-color: var(--pico-contrast); 1078 929 --pico-underline: var(--pico-contrast-underline); 1079 930 } 1080 1080 - .pico 1081 1081 - :where(a:not([role="button"])).contrast:is( 1082 1082 - [aria-current]:not([aria-current="false"]), 1083 1083 - :hover, 1084 1084 - :active, 1085 1085 - :focus 1086 1086 - ), 1087 1087 - .pico 1088 1088 - [role="link"].contrast:is( 1089 1089 - [aria-current]:not([aria-current="false"]), 1090 1090 - :hover, 1091 1091 - :active, 1092 1092 - :focus 1093 1093 - ) { 931 931 + .pico :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 932 932 + .pico [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1094 933 --pico-color: var(--pico-contrast-hover); 1095 934 --pico-underline: var(--pico-contrast-hover-underline); 1096 935 } ··· 1126 965 --pico-border-color: var(--pico-primary-border); 1127 966 --pico-color: var(--pico-primary-inverse); 1128 967 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 1129 1129 - padding: var(--pico-form-element-spacing-vertical) 1130 1130 - var(--pico-form-element-spacing-horizontal); 968 968 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1131 969 border: var(--pico-border-width) solid var(--pico-border-color); 1132 970 border-radius: var(--pico-border-radius); 1133 971 outline: none; ··· 1143 981 -webkit-user-select: none; 1144 982 -moz-user-select: none; 1145 983 user-select: none; 1146 1146 - transition: background-color var(--pico-transition), 1147 1147 - border-color var(--pico-transition), color var(--pico-transition), 984 984 + transition: 985 985 + background-color var(--pico-transition), 986 986 + border-color var(--pico-transition), 987 987 + color var(--pico-transition), 1148 988 box-shadow var(--pico-transition); 1149 989 } 1150 990 .pico button:is([aria-current]:not([aria-current="false"])), ··· 1155 995 .pico [type="reset"]:is(:hover, :active, :focus), 1156 996 .pico [type="button"]:is([aria-current]:not([aria-current="false"])), 1157 997 .pico [type="button"]:is(:hover, :active, :focus), 1158 1158 - .pico 1159 1159 - [type="file"]::file-selector-button:is( 1160 1160 - [aria-current]:not([aria-current="false"]) 1161 1161 - ), 998 998 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 1162 999 .pico [type="file"]::file-selector-button:is(:hover, :active, :focus), 1163 1000 .pico [role="button"]:is([aria-current]:not([aria-current="false"])), 1164 1001 .pico [role="button"]:is(:hover, :active, :focus) { ··· 1176 1013 .pico [type="button"]:focus, 1177 1014 .pico [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 1178 1015 .pico [type="file"]::file-selector-button:focus, 1179 1179 - .pico 1180 1180 - [type="file"]::file-selector-button:is( 1181 1181 - [aria-current]:not([aria-current="false"]) 1182 1182 - ):focus, 1016 1016 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 1183 1017 .pico [role="button"]:focus, 1184 1018 .pico [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 1185 1185 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1186 1186 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1019 1019 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1187 1020 } 1188 1021 1189 1022 .pico [type="submit"], ··· 1200 1033 --pico-color: var(--pico-secondary-inverse); 1201 1034 cursor: pointer; 1202 1035 } 1203 1203 - .pico 1204 1204 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is( 1205 1205 - [aria-current]:not([aria-current="false"]), 1206 1206 - :hover, 1207 1207 - :active, 1208 1208 - :focus 1209 1209 - ), 1210 1210 - .pico 1211 1211 - [type="reset"]:is( 1212 1212 - [aria-current]:not([aria-current="false"]), 1213 1213 - :hover, 1214 1214 - :active, 1215 1215 - :focus 1216 1216 - ), 1217 1217 - .pico 1218 1218 - [type="file"]::file-selector-button:is( 1219 1219 - [aria-current]:not([aria-current="false"]), 1220 1220 - :hover, 1221 1221 - :active, 1222 1222 - :focus 1223 1223 - ) { 1036 1036 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1037 1037 + .pico [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1038 1038 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1224 1039 --pico-background-color: var(--pico-secondary-hover-background); 1225 1040 --pico-border-color: var(--pico-secondary-hover-border); 1226 1041 --pico-color: var(--pico-secondary-inverse); 1227 1042 } 1228 1228 - .pico 1229 1229 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus, 1230 1230 - .pico 1231 1231 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is( 1232 1232 - [aria-current]:not([aria-current="false"]) 1233 1233 - ):focus, 1043 1043 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus, 1044 1044 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):focus, 1234 1045 .pico [type="reset"]:focus, 1235 1046 .pico [type="reset"]:is([aria-current]:not([aria-current="false"])):focus, 1236 1047 .pico [type="file"]::file-selector-button:focus, 1237 1237 - .pico 1238 1238 - [type="file"]::file-selector-button:is( 1239 1239 - [aria-current]:not([aria-current="false"]) 1240 1240 - ):focus { 1241 1241 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1242 1242 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1048 1048 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus { 1049 1049 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1243 1050 } 1244 1051 1245 1052 .pico :is(button, [type="submit"], [type="button"], [role="button"]).contrast { ··· 1247 1054 --pico-border-color: var(--pico-contrast-border); 1248 1055 --pico-color: var(--pico-contrast-inverse); 1249 1056 } 1250 1250 - .pico 1251 1251 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is( 1252 1252 - [aria-current]:not([aria-current="false"]), 1253 1253 - :hover, 1254 1254 - :active, 1255 1255 - :focus 1256 1256 - ) { 1057 1057 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1257 1058 --pico-background-color: var(--pico-contrast-hover-background); 1258 1059 --pico-border-color: var(--pico-contrast-hover-border); 1259 1060 --pico-color: var(--pico-contrast-inverse); 1260 1061 } 1261 1261 - .pico 1262 1262 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus, 1263 1263 - .pico 1264 1264 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is( 1265 1265 - [aria-current]:not([aria-current="false"]) 1266 1266 - ):focus { 1267 1267 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1268 1268 - 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 1062 1062 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus, 1063 1063 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus { 1064 1064 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 1269 1065 } 1270 1066 1271 1067 .pico :is(button, [type="submit"], [type="button"], [role="button"]).outline, ··· 1274 1070 --pico-color: var(--pico-primary); 1275 1071 --pico-border-color: var(--pico-primary); 1276 1072 } 1277 1277 - .pico 1278 1278 - :is(button, [type="submit"], [type="button"], [role="button"]).outline:is( 1279 1279 - [aria-current]:not([aria-current="false"]), 1280 1280 - :hover, 1281 1281 - :active, 1282 1282 - :focus 1283 1283 - ), 1284 1284 - [type="reset"].outline:is( 1285 1285 - [aria-current]:not([aria-current="false"]), 1286 1286 - :hover, 1287 1287 - :active, 1288 1288 - :focus 1289 1289 - ) { 1073 1073 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1074 1074 + [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1290 1075 --pico-background-color: transparent; 1291 1076 --pico-color: var(--pico-primary-hover); 1292 1077 --pico-border-color: var(--pico-primary-hover); 1293 1078 } 1294 1079 1295 1295 - .pico 1296 1296 - :is( 1297 1297 - button, 1298 1298 - [type="submit"], 1299 1299 - [type="button"], 1300 1300 - [role="button"] 1301 1301 - ).outline.secondary, 1080 1080 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, 1302 1081 [type="reset"].outline { 1303 1082 --pico-color: var(--pico-secondary); 1304 1083 --pico-border-color: var(--pico-secondary); 1305 1084 } 1306 1306 - .pico 1307 1307 - :is( 1308 1308 - button, 1309 1309 - [type="submit"], 1310 1310 - [type="button"], 1311 1311 - [role="button"] 1312 1312 - ).outline.secondary:is( 1313 1313 - [aria-current]:not([aria-current="false"]), 1314 1314 - :hover, 1315 1315 - :active, 1316 1316 - :focus 1317 1317 - ), 1318 1318 - [type="reset"].outline:is( 1319 1319 - [aria-current]:not([aria-current="false"]), 1320 1320 - :hover, 1321 1321 - :active, 1322 1322 - :focus 1323 1323 - ) { 1085 1085 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1086 1086 + [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1324 1087 --pico-color: var(--pico-secondary-hover); 1325 1088 --pico-border-color: var(--pico-secondary-hover); 1326 1089 } 1327 1090 1328 1328 - .pico 1329 1329 - :is( 1330 1330 - button, 1331 1331 - [type="submit"], 1332 1332 - [type="button"], 1333 1333 - [role="button"] 1334 1334 - ).outline.contrast { 1091 1091 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast { 1335 1092 --pico-color: var(--pico-contrast); 1336 1093 --pico-border-color: var(--pico-contrast); 1337 1094 } 1338 1338 - .pico 1339 1339 - :is( 1340 1340 - button, 1341 1341 - [type="submit"], 1342 1342 - [type="button"], 1343 1343 - [role="button"] 1344 1344 - ).outline.contrast:is( 1345 1345 - [aria-current]:not([aria-current="false"]), 1346 1346 - :hover, 1347 1347 - :active, 1348 1348 - :focus 1349 1349 - ) { 1095 1095 + .pico :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1350 1096 --pico-color: var(--pico-contrast-hover); 1351 1097 --pico-border-color: var(--pico-contrast-hover); 1352 1098 } 1353 1099 1354 1354 - .pico 1355 1355 - :where( 1356 1356 - button, 1357 1357 - [type="submit"], 1358 1358 - [type="reset"], 1359 1359 - [type="button"], 1360 1360 - [role="button"] 1361 1361 - )[disabled], 1362 1362 - .pico 1363 1363 - :where(fieldset[disabled]) 1364 1364 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1100 1100 + .pico :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 1101 1101 + .pico :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1365 1102 opacity: 0.5; 1366 1103 pointer-events: none; 1367 1104 } ··· 1607 1344 } 1608 1345 1609 1346 .pico input:not([type="checkbox"], [type="radio"], [type="range"]) { 1610 1610 - height: calc( 1611 1611 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1612 1612 - var(--pico-border-width) * 2 1613 1613 - ); 1347 1347 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1614 1348 } 1615 1349 1616 1350 .pico fieldset { ··· 1640 1374 width: 100%; 1641 1375 } 1642 1376 1643 1643 - .pico 1644 1644 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 1377 1377 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 1645 1378 .pico select, 1646 1379 .pico textarea { 1647 1380 -webkit-appearance: none; 1648 1381 -moz-appearance: none; 1649 1382 appearance: none; 1650 1650 - padding: var(--pico-form-element-spacing-vertical) 1651 1651 - var(--pico-form-element-spacing-horizontal); 1383 1383 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1652 1384 } 1653 1385 1654 1386 .pico input, ··· 1665 1397 box-shadow: var(--pico-box-shadow); 1666 1398 color: var(--pico-color); 1667 1399 font-weight: var(--pico-font-weight); 1668 1668 - transition: background-color var(--pico-transition), 1669 1669 - border-color var(--pico-transition), color var(--pico-transition), 1400 1400 + transition: 1401 1401 + background-color var(--pico-transition), 1402 1402 + border-color var(--pico-transition), 1403 1403 + color var(--pico-transition), 1670 1404 box-shadow var(--pico-transition); 1671 1405 } 1672 1406 1673 1673 - .pico 1674 1674 - input:not( 1675 1675 - [type="submit"], 1676 1676 - [type="button"], 1677 1677 - [type="reset"], 1678 1678 - [type="checkbox"], 1679 1679 - [type="radio"], 1680 1680 - [readonly] 1681 1681 - ):is(:active, :focus), 1407 1407 + .pico input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1682 1408 .pico :where(select, textarea):not([readonly]):is(:active, :focus) { 1683 1409 --pico-background-color: var(--pico-form-element-active-background-color); 1684 1410 } 1685 1411 1686 1686 - .pico 1687 1687 - input:not( 1688 1688 - [type="submit"], 1689 1689 - [type="button"], 1690 1690 - [type="reset"], 1691 1691 - [role="switch"], 1692 1692 - [readonly] 1693 1693 - ):is(:active, :focus), 1412 1412 + .pico input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1694 1413 .pico :where(select, textarea):not([readonly]):is(:active, :focus) { 1695 1414 --pico-border-color: var(--pico-form-element-active-border-color); 1696 1415 } 1697 1416 1698 1698 - .pico 1699 1699 - input:not( 1700 1700 - [type="submit"], 1701 1701 - [type="button"], 1702 1702 - [type="reset"], 1703 1703 - [type="range"], 1704 1704 - [type="file"], 1705 1705 - [readonly] 1706 1706 - ):focus, 1417 1417 + .pico input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1707 1418 .pico :where(select, textarea):not([readonly]):focus { 1708 1708 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1709 1709 - var(--pico-form-element-focus-color); 1419 1419 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1710 1420 } 1711 1421 1712 1422 .pico input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1713 1423 .pico select[disabled], 1714 1424 .pico textarea[disabled], 1715 1425 .pico label[aria-disabled="true"], 1716 1716 - .pico 1717 1717 - :where(fieldset[disabled]) 1718 1718 - :is( 1719 1719 - input:not([type="submit"], [type="button"], [type="reset"]), 1720 1720 - select, 1721 1721 - textarea 1722 1722 - ) { 1426 1426 + .pico :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1723 1427 opacity: var(--pico-form-element-disabled-opacity); 1724 1428 pointer-events: none; 1725 1429 } ··· 1739 1443 [type="week"], 1740 1444 [type="range"] 1741 1445 )[aria-invalid] { 1742 1742 - padding-right: calc( 1743 1743 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1744 1744 - ) !important; 1446 1446 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1745 1447 padding-left: var(--pico-form-element-spacing-horizontal); 1746 1448 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1747 1747 - padding-inline-end: calc( 1748 1748 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1749 1749 - ) !important; 1449 1449 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1750 1450 background-position: center right 0.75rem; 1751 1451 background-size: 1rem auto; 1752 1452 background-repeat: no-repeat; ··· 1780 1480 .pico :where(input, select, textarea)[aria-invalid="false"] { 1781 1481 --pico-border-color: var(--pico-form-element-valid-border-color); 1782 1482 } 1783 1783 - .pico 1784 1784 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1785 1785 - --pico-border-color: var( 1786 1786 - --pico-form-element-valid-active-border-color 1787 1787 - ) !important; 1483 1483 + .pico :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1484 1484 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1788 1485 } 1789 1789 - .pico 1790 1790 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1791 1791 - [type="checkbox"], 1792 1792 - [type="radio"] 1793 1793 - ) { 1794 1794 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1795 1795 - var(--pico-form-element-valid-focus-color) !important; 1486 1486 + .pico :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1487 1487 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1796 1488 } 1797 1489 .pico :where(input, select, textarea)[aria-invalid="true"] { 1798 1490 --pico-border-color: var(--pico-form-element-invalid-border-color); 1799 1491 } 1800 1492 .pico :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1801 1801 - --pico-border-color: var( 1802 1802 - --pico-form-element-invalid-active-border-color 1803 1803 - ) !important; 1493 1493 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1804 1494 } 1805 1805 - .pico 1806 1806 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1807 1807 - [type="checkbox"], 1808 1808 - [type="radio"] 1809 1809 - ) { 1810 1810 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1811 1811 - var(--pico-form-element-invalid-focus-color) !important; 1495 1495 + .pico :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1496 1496 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1812 1497 } 1813 1498 1814 1814 - [dir="rtl"] 1815 1815 - .pico 1816 1816 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1817 1817 - [aria-invalid], 1818 1818 - [aria-invalid="true"], 1819 1819 - [aria-invalid="false"] 1820 1820 - ) { 1499 1499 + [dir="rtl"] .pico :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1821 1500 background-position: center left 0.75rem; 1822 1501 } 1823 1502 ··· 1864 1543 resize: vertical; 1865 1544 } 1866 1545 .pico textarea[aria-invalid] { 1867 1867 - --pico-icon-height: calc( 1868 1868 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1869 1869 - var(--pico-border-width) * 2 1870 1870 - ); 1546 1546 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1871 1547 background-position: top right 0.75rem !important; 1872 1548 background-size: 1rem var(--pico-icon-height) !important; 1873 1549 } ··· 1879 1555 margin-bottom: var(--pico-spacing); 1880 1556 color: var(--pico-muted-color); 1881 1557 } 1882 1882 - .pico 1883 1883 - :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] 1884 1884 - + small { 1558 1558 + .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small { 1885 1559 color: var(--pico-ins-color); 1886 1560 } 1887 1887 - .pico 1888 1888 - :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] 1889 1889 - + small { 1561 1561 + .pico :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small { 1890 1562 color: var(--pico-del-color); 1891 1563 } 1892 1564 ··· 2080 1752 background-size: var(--pico-icon-width) auto; 2081 1753 background-repeat: no-repeat; 2082 1754 } 2083 2083 - .pico 2084 2084 - input:not( 2085 2085 - [type="checkbox"], 2086 2086 - [type="radio"], 2087 2087 - [type="range"], 2088 2088 - [type="file"] 2089 2089 - )[type="time"] { 1755 1755 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 2090 1756 background-image: var(--pico-icon-time); 2091 1757 } 2092 1758 ··· 2111 1777 background-image: none !important; 2112 1778 } 2113 1779 } 2114 2114 - [dir="rtl"] 2115 2115 - .pico 2116 2116 - :is( 2117 2117 - [type="date"], 2118 2118 - [type="datetime-local"], 2119 2119 - [type="month"], 2120 2120 - [type="time"], 2121 2121 - [type="week"] 2122 2122 - ) { 1780 1780 + [dir="rtl"] .pico :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 2123 1781 text-align: right; 2124 1782 } 2125 1783 ··· 2137 1795 } 2138 1796 .pico [type="file"]::file-selector-button { 2139 1797 margin-right: calc(var(--pico-spacing) / 2); 2140 2140 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2141 2141 - var(--pico-form-element-spacing-horizontal); 1798 1798 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2142 1799 } 2143 1800 .pico [type="file"]:is(:hover, :active, :focus)::file-selector-button { 2144 1801 --pico-background-color: var(--pico-secondary-hover-background); 2145 1802 --pico-border-color: var(--pico-secondary-hover-border); 2146 1803 } 2147 1804 .pico [type="file"]:focus::file-selector-button { 2148 2148 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 2149 2149 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1805 1805 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 2150 1806 } 2151 1807 2152 1808 /** ··· 2165 1821 height: 0.375rem; 2166 1822 border-radius: var(--pico-border-radius); 2167 1823 background-color: var(--pico-range-border-color); 2168 2168 - -webkit-transition: background-color var(--pico-transition), 1824 1824 + -webkit-transition: 1825 1825 + background-color var(--pico-transition), 2169 1826 box-shadow var(--pico-transition); 2170 2170 - transition: background-color var(--pico-transition), 1827 1827 + transition: 1828 1828 + background-color var(--pico-transition), 2171 1829 box-shadow var(--pico-transition); 2172 1830 } 2173 1831 .pico [type="range"]::-moz-range-track { ··· 2175 1833 height: 0.375rem; 2176 1834 border-radius: var(--pico-border-radius); 2177 1835 background-color: var(--pico-range-border-color); 2178 2178 - -moz-transition: background-color var(--pico-transition), 1836 1836 + -moz-transition: 1837 1837 + background-color var(--pico-transition), 2179 1838 box-shadow var(--pico-transition); 2180 2180 - transition: background-color var(--pico-transition), 1839 1839 + transition: 1840 1840 + background-color var(--pico-transition), 2181 1841 box-shadow var(--pico-transition); 2182 1842 } 2183 1843 .pico [type="range"]::-ms-track { ··· 2185 1845 height: 0.375rem; 2186 1846 border-radius: var(--pico-border-radius); 2187 1847 background-color: var(--pico-range-border-color); 2188 2188 - -ms-transition: background-color var(--pico-transition), 1848 1848 + -ms-transition: 1849 1849 + background-color var(--pico-transition), 2189 1850 box-shadow var(--pico-transition); 2190 2190 - transition: background-color var(--pico-transition), 1851 1851 + transition: 1852 1852 + background-color var(--pico-transition), 2191 1853 box-shadow var(--pico-transition); 2192 1854 } 2193 1855 .pico [type="range"]::-webkit-slider-thumb { ··· 2199 1861 border-radius: 50%; 2200 1862 background-color: var(--pico-range-thumb-color); 2201 1863 cursor: pointer; 2202 2202 - -webkit-transition: background-color var(--pico-transition), 1864 1864 + -webkit-transition: 1865 1865 + background-color var(--pico-transition), 2203 1866 transform var(--pico-transition); 2204 2204 - transition: background-color var(--pico-transition), 1867 1867 + transition: 1868 1868 + background-color var(--pico-transition), 2205 1869 transform var(--pico-transition); 2206 1870 } 2207 1871 .pico [type="range"]::-moz-range-thumb { ··· 2213 1877 border-radius: 50%; 2214 1878 background-color: var(--pico-range-thumb-color); 2215 1879 cursor: pointer; 2216 2216 - -moz-transition: background-color var(--pico-transition), 1880 1880 + -moz-transition: 1881 1881 + background-color var(--pico-transition), 2217 1882 transform var(--pico-transition); 2218 2218 - transition: background-color var(--pico-transition), 1883 1883 + transition: 1884 1884 + background-color var(--pico-transition), 2219 1885 transform var(--pico-transition); 2220 1886 } 2221 1887 .pico [type="range"]::-ms-thumb { ··· 2227 1893 border-radius: 50%; 2228 1894 background-color: var(--pico-range-thumb-color); 2229 1895 cursor: pointer; 2230 2230 - -ms-transition: background-color var(--pico-transition), 1896 1896 + -ms-transition: 1897 1897 + background-color var(--pico-transition), 2231 1898 transform var(--pico-transition); 2232 2232 - transition: background-color var(--pico-transition), 1899 1899 + transition: 1900 1900 + background-color var(--pico-transition), 2233 1901 transform var(--pico-transition); 2234 1902 } 2235 1903 .pico [type="range"]:active, ··· 2250 1918 /** 2251 1919 * Input type search 2252 1920 */ 2253 2253 - .pico 2254 2254 - input:not( 2255 2255 - [type="checkbox"], 2256 2256 - [type="radio"], 2257 2257 - [type="range"], 2258 2258 - [type="file"] 2259 2259 - )[type="search"] { 2260 2260 - padding-inline-start: calc( 2261 2261 - var(--pico-form-element-spacing-horizontal) + 1.75rem 2262 2262 - ); 1921 1921 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1922 1922 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 2263 1923 background-image: var(--pico-icon-search); 2264 2264 - background-position: center left 2265 2265 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1924 1924 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 2266 1925 background-size: 1rem auto; 2267 1926 background-repeat: no-repeat; 2268 1927 } 2269 2269 - .pico 2270 2270 - input:not( 2271 2271 - [type="checkbox"], 2272 2272 - [type="radio"], 2273 2273 - [type="range"], 2274 2274 - [type="file"] 2275 2275 - )[type="search"][aria-invalid] { 2276 2276 - padding-inline-start: calc( 2277 2277 - var(--pico-form-element-spacing-horizontal) + 1.75rem 2278 2278 - ) !important; 2279 2279 - background-position: center left 1.125rem, center right 0.75rem; 1928 1928 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1929 1929 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1930 1930 + background-position: 1931 1931 + center left 1.125rem, 1932 1932 + center right 0.75rem; 2280 1933 } 2281 2281 - .pico 2282 2282 - input:not( 2283 2283 - [type="checkbox"], 2284 2284 - [type="radio"], 2285 2285 - [type="range"], 2286 2286 - [type="file"] 2287 2287 - )[type="search"][aria-invalid="false"] { 1934 1934 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 2288 1935 background-image: var(--pico-icon-search), var(--pico-icon-valid); 2289 1936 } 2290 2290 - .pico 2291 2291 - input:not( 2292 2292 - [type="checkbox"], 2293 2293 - [type="radio"], 2294 2294 - [type="range"], 2295 2295 - [type="file"] 2296 2296 - )[type="search"][aria-invalid="true"] { 1937 1937 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 2297 1938 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 2298 1939 } 2299 1940 2300 2300 - [dir="rtl"] 2301 2301 - .pico 2302 2302 - :where(input):not( 2303 2303 - [type="checkbox"], 2304 2304 - [type="radio"], 2305 2305 - [type="range"], 2306 2306 - [type="file"] 2307 2307 - )[type="search"] { 1941 1941 + [dir="rtl"] .pico :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 2308 1942 background-position: center right 1.125rem; 2309 1943 } 2310 2310 - [dir="rtl"] 2311 2311 - .pico 2312 2312 - :where(input):not( 2313 2313 - [type="checkbox"], 2314 2314 - [type="radio"], 2315 2315 - [type="range"], 2316 2316 - [type="file"] 2317 2317 - )[type="search"][aria-invalid] { 2318 2318 - background-position: center right 1.125rem, center left 0.75rem; 1944 1944 + [dir="rtl"] .pico :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1945 1945 + background-position: 1946 1946 + center right 1.125rem, 1947 1947 + center left 0.75rem; 2319 1948 } 2320 1949 2321 1950 /** ··· 2407 2036 .pico article > footer { 2408 2037 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2409 2038 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2410 2410 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2411 2411 - var(--pico-block-spacing-horizontal); 2039 2039 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2412 2040 background-color: var(--pico-card-sectioning-background-color); 2413 2041 } 2414 2042 .pico article > header { ··· 2454 2082 } 2455 2083 2456 2084 .pico details.dropdown > summary:not([role]) { 2457 2457 - height: calc( 2458 2458 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 2459 2459 - var(--pico-border-width) * 2 2460 2460 - ); 2461 2461 - padding: var(--pico-form-element-spacing-vertical) 2462 2462 - var(--pico-form-element-spacing-horizontal); 2085 2085 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 2086 2086 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 2463 2087 border: var(--pico-border-width) solid var(--pico-form-element-border-color); 2464 2088 border-radius: var(--pico-border-radius); 2465 2089 background-color: var(--pico-form-element-background-color); ··· 2469 2093 -webkit-user-select: none; 2470 2094 -moz-user-select: none; 2471 2095 user-select: none; 2472 2472 - transition: background-color var(--pico-transition), 2473 2473 - border-color var(--pico-transition), color var(--pico-transition), 2096 2096 + transition: 2097 2097 + background-color var(--pico-transition), 2098 2098 + border-color var(--pico-transition), 2099 2099 + color var(--pico-transition), 2474 2100 box-shadow var(--pico-transition); 2475 2101 } 2476 2102 .pico details.dropdown > summary:not([role]):active, ··· 2486 2112 } 2487 2113 .pico details.dropdown > summary:not([role])[aria-invalid="false"] { 2488 2114 --pico-form-element-border-color: var(--pico-form-element-valid-border-color); 2489 2489 - --pico-form-element-active-border-color: var( 2490 2490 - --pico-form-element-valid-focus-color 2491 2491 - ); 2115 2115 + --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); 2492 2116 --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); 2493 2117 } 2494 2118 .pico details.dropdown > summary:not([role])[aria-invalid="true"] { 2495 2119 --pico-form-element-border-color: var(--pico-form-element-invalid-border-color); 2496 2496 - --pico-form-element-active-border-color: var( 2497 2497 - --pico-form-element-invalid-focus-color 2498 2498 - ); 2120 2120 + --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); 2499 2121 --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); 2500 2122 } 2501 2123 ··· 2507 2129 transform: rotate(0deg) translateX(0rem); 2508 2130 } 2509 2131 .pico nav details.dropdown > summary:not([role]) { 2510 2510 - height: calc( 2511 2511 - 1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 2512 2512 - ); 2513 2513 - padding: calc( 2514 2514 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2515 2515 - ) 2516 2516 - var(--pico-nav-link-spacing-horizontal); 2132 2132 + height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); 2133 2133 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2517 2134 } 2518 2135 .pico nav details.dropdown > summary:not([role]):focus-visible { 2519 2136 box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); ··· 2538 2155 color: var(--pico-dropdown-color); 2539 2156 white-space: nowrap; 2540 2157 opacity: 0; 2541 2541 - transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; 2158 2158 + transition: 2159 2159 + opacity var(--pico-transition), 2160 2160 + transform 0s ease-in-out 1s; 2542 2161 } 2543 2162 .pico details.dropdown > summary + ul[dir="rtl"] { 2544 2163 right: 0; ··· 2547 2166 .pico details.dropdown > summary + ul li { 2548 2167 width: 100%; 2549 2168 margin-bottom: 0; 2550 2550 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2551 2551 - var(--pico-form-element-spacing-horizontal); 2169 2169 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2552 2170 list-style: none; 2553 2171 } 2554 2172 .pico details.dropdown > summary + ul li:first-of-type { ··· 2559 2177 } 2560 2178 .pico details.dropdown > summary + ul li a { 2561 2179 display: block; 2562 2562 - margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) 2563 2563 - calc(var(--pico-form-element-spacing-horizontal) * -1); 2564 2564 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2565 2565 - var(--pico-form-element-spacing-horizontal); 2180 2180 + margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); 2181 2181 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2566 2182 overflow: hidden; 2567 2183 border-radius: 0; 2568 2184 color: var(--pico-dropdown-color); ··· 2573 2189 .pico details.dropdown > summary + ul li a:focus, 2574 2190 .pico details.dropdown > summary + ul li a:active, 2575 2191 .pico details.dropdown > summary + ul li a:focus-visible, 2576 2576 - .pico 2577 2577 - details.dropdown 2578 2578 - > summary 2579 2579 - + ul 2580 2580 - li 2581 2581 - a[aria-current]:not([aria-current="false"]) { 2192 2192 + .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) { 2582 2193 background-color: var(--pico-dropdown-hover-background-color); 2583 2194 } 2584 2195 .pico details.dropdown > summary + ul li label { ··· 2595 2206 .pico details.dropdown[open] > summary + ul { 2596 2207 transform: scaleY(1); 2597 2208 opacity: 1; 2598 2598 - transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; 2209 2209 + transition: 2210 2210 + opacity var(--pico-transition), 2211 2211 + transform 0s ease-in-out 0s; 2599 2212 } 2600 2213 2601 2214 .pico details.dropdown[open] > summary::before { ··· 2639 2252 margin-bottom: 0; 2640 2253 } 2641 2254 .pico [role="search"] > *:not(:first-child), 2642 2642 - .pico 2643 2643 - [role="search"] 2644 2644 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 2255 2255 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2645 2256 .pico [role="search"] select:not(:first-child), 2646 2257 .pico [role="group"] > *:not(:first-child), 2647 2647 - .pico 2648 2648 - [role="group"] 2649 2649 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 2258 2258 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2650 2259 .pico [role="group"] select:not(:first-child) { 2651 2260 margin-left: 0; 2652 2261 border-top-left-radius: 0; 2653 2262 border-bottom-left-radius: 0; 2654 2263 } 2655 2264 .pico [role="search"] > *:not(:last-child), 2656 2656 - .pico 2657 2657 - [role="search"] 2658 2658 - input:not([type="checkbox"], [type="radio"]):not(:last-child), 2265 2265 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), 2659 2266 .pico [role="search"] select:not(:last-child), 2660 2267 .pico [role="group"] > *:not(:last-child), 2661 2661 - .pico 2662 2662 - [role="group"] 2663 2663 - input:not([type="checkbox"], [type="radio"]):not(:last-child), 2268 2268 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), 2664 2269 .pico [role="group"] select:not(:last-child) { 2665 2270 border-top-right-radius: 0; 2666 2271 border-bottom-right-radius: 0; ··· 2678 2283 .pico [role="search"] [type="reset"]:not(:first-child), 2679 2284 .pico [role="search"] [type="button"]:not(:first-child), 2680 2285 .pico [role="search"] [role="button"]:not(:first-child), 2681 2681 - .pico 2682 2682 - [role="search"] 2683 2683 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 2286 2286 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2684 2287 .pico [role="search"] select:not(:first-child), 2685 2288 .pico [role="group"] button:not(:first-child), 2686 2289 .pico [role="group"] [type="submit"]:not(:first-child), 2687 2290 .pico [role="group"] [type="reset"]:not(:first-child), 2688 2291 .pico [role="group"] [type="button"]:not(:first-child), 2689 2292 .pico [role="group"] [role="button"]:not(:first-child), 2690 2690 - .pico 2691 2691 - [role="group"] 2692 2692 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 2293 2293 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2693 2294 .pico [role="group"] select:not(:first-child) { 2694 2295 margin-left: calc(var(--pico-border-width) * -1); 2695 2296 } ··· 2706 2307 width: auto; 2707 2308 } 2708 2309 @supports selector(:has(*)) { 2709 2709 - .pico 2710 2710 - [role="search"]:has( 2711 2711 - button:focus, 2712 2712 - [type="submit"]:focus, 2713 2713 - [type="button"]:focus, 2714 2714 - [role="button"]:focus 2715 2715 - ), 2716 2716 - .pico 2717 2717 - [role="group"]:has( 2718 2718 - button:focus, 2719 2719 - [type="submit"]:focus, 2720 2720 - [type="button"]:focus, 2721 2721 - [role="button"]:focus 2722 2722 - ) { 2310 2310 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 2311 2311 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2723 2312 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2724 2313 } 2725 2725 - .pico 2726 2726 - [role="search"]:has( 2727 2727 - button:focus, 2728 2728 - [type="submit"]:focus, 2729 2729 - [type="button"]:focus, 2730 2730 - [role="button"]:focus 2731 2731 - ) 2732 2732 - input:not([type="checkbox"], [type="radio"]), 2733 2733 - .pico 2734 2734 - [role="search"]:has( 2735 2735 - button:focus, 2736 2736 - [type="submit"]:focus, 2737 2737 - [type="button"]:focus, 2738 2738 - [role="button"]:focus 2739 2739 - ) 2740 2740 - select, 2741 2741 - .pico 2742 2742 - [role="group"]:has( 2743 2743 - button:focus, 2744 2744 - [type="submit"]:focus, 2745 2745 - [type="button"]:focus, 2746 2746 - [role="button"]:focus 2747 2747 - ) 2748 2748 - input:not([type="checkbox"], [type="radio"]), 2749 2749 - .pico 2750 2750 - [role="group"]:has( 2751 2751 - button:focus, 2752 2752 - [type="submit"]:focus, 2753 2753 - [type="button"]:focus, 2754 2754 - [role="button"]:focus 2755 2755 - ) 2756 2756 - select { 2314 2314 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 2315 2315 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 2316 2316 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 2317 2317 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2757 2318 border-color: transparent; 2758 2319 } 2759 2759 - .pico 2760 2760 - [role="search"]:has( 2761 2761 - input:not([type="submit"], [type="button"]):focus, 2762 2762 - select:focus 2763 2763 - ), 2764 2764 - .pico 2765 2765 - [role="group"]:has( 2766 2766 - input:not([type="submit"], [type="button"]):focus, 2767 2767 - select:focus 2768 2768 - ) { 2320 2320 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 2321 2321 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2769 2322 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2770 2323 } 2771 2771 - .pico 2772 2772 - [role="search"]:has( 2773 2773 - input:not([type="submit"], [type="button"]):focus, 2774 2774 - select:focus 2775 2775 - ) 2776 2776 - button, 2777 2777 - .pico 2778 2778 - [role="search"]:has( 2779 2779 - input:not([type="submit"], [type="button"]):focus, 2780 2780 - select:focus 2781 2781 - ) 2782 2782 - [type="submit"], 2783 2783 - .pico 2784 2784 - [role="search"]:has( 2785 2785 - input:not([type="submit"], [type="button"]):focus, 2786 2786 - select:focus 2787 2787 - ) 2788 2788 - [type="button"], 2789 2789 - .pico 2790 2790 - [role="search"]:has( 2791 2791 - input:not([type="submit"], [type="button"]):focus, 2792 2792 - select:focus 2793 2793 - ) 2794 2794 - [role="button"], 2795 2795 - .pico 2796 2796 - [role="group"]:has( 2797 2797 - input:not([type="submit"], [type="button"]):focus, 2798 2798 - select:focus 2799 2799 - ) 2800 2800 - button, 2801 2801 - .pico 2802 2802 - [role="group"]:has( 2803 2803 - input:not([type="submit"], [type="button"]):focus, 2804 2804 - select:focus 2805 2805 - ) 2806 2806 - [type="submit"], 2807 2807 - .pico 2808 2808 - [role="group"]:has( 2809 2809 - input:not([type="submit"], [type="button"]):focus, 2810 2810 - select:focus 2811 2811 - ) 2812 2812 - [type="button"], 2813 2813 - .pico 2814 2814 - [role="group"]:has( 2815 2815 - input:not([type="submit"], [type="button"]):focus, 2816 2816 - select:focus 2817 2817 - ) 2818 2818 - [role="button"] { 2819 2819 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2820 2820 - var(--pico-primary-border); 2821 2821 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2822 2822 - var(--pico-primary-hover-border); 2324 2324 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 2325 2325 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 2326 2326 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 2327 2327 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 2328 2328 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 2329 2329 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 2330 2330 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 2331 2331 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 2332 2332 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 2333 2333 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2823 2334 } 2824 2335 .pico [role="search"] button:focus, 2825 2336 .pico [role="search"] [type="submit"]:focus, ··· 2860 2371 content: ""; 2861 2372 vertical-align: -0.125em; 2862 2373 } 2863 2863 - .pico 2864 2864 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2865 2865 - :empty 2866 2866 - )::before { 2374 2374 + .pico [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2867 2375 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2868 2376 } 2869 2377 .pico [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2962 2470 opacity: 0.5; 2963 2471 transition: opacity var(--pico-transition); 2964 2472 } 2965 2965 - .pico 2966 2966 - dialog 2967 2967 - > article 2968 2968 - .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 2969 2969 - .pico 2970 2970 - dialog 2971 2971 - > article 2972 2972 - :is(a, button)[rel="prev"]:is( 2973 2973 - [aria-current]:not([aria-current="false"]), 2974 2974 - :hover, 2975 2975 - :active, 2976 2976 - :focus 2977 2977 - ) { 2473 2473 + .pico dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 2474 2474 + .pico dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2978 2475 opacity: 1; 2979 2476 } 2980 2477 .pico dialog:not([open]), ··· 3062 2559 .pico nav li { 3063 2560 display: inline-block; 3064 2561 margin: 0; 3065 3065 - padding: var(--pico-nav-element-spacing-vertical) 3066 3066 - var(--pico-nav-element-spacing-horizontal); 2562 2562 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 3067 2563 } 3068 2564 .pico nav li :where(a, [role="link"]) { 3069 2565 display: inline-block; 3070 3070 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 3071 3071 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 3072 3072 - padding: var(--pico-nav-link-spacing-vertical) 3073 3073 - var(--pico-nav-link-spacing-horizontal); 2566 2566 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2567 2567 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 3074 2568 border-radius: var(--pico-border-radius); 3075 2569 } 3076 2570 .pico nav li :where(a, [role="link"]):not(:hover) { ··· 3079 2573 .pico nav li button, 3080 2574 .pico nav li [role="button"], 3081 2575 .pico nav li [type="button"], 3082 3082 - .pico 3083 3083 - nav 3084 3084 - li 3085 3085 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2576 2576 + .pico nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 3086 2577 .pico nav li select { 3087 2578 height: auto; 3088 2579 margin-right: inherit; 3089 2580 margin-bottom: 0; 3090 2581 margin-left: inherit; 3091 3091 - padding: calc( 3092 3092 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 3093 3093 - ) 3094 3094 - var(--pico-nav-link-spacing-horizontal); 2582 2582 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 3095 2583 } 3096 2584 .pico nav[aria-label="breadcrumb"] { 3097 2585 align-items: center; ··· 3129 2617 display: block; 3130 2618 } 3131 2619 .pico aside li { 3132 3132 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 3133 3133 - var(--pico-nav-element-spacing-horizontal); 2620 2620 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 3134 2621 } 3135 2622 .pico aside li a { 3136 2623 display: block; ··· 3179 2666 } 3180 2667 @media (prefers-reduced-motion: no-preference) { 3181 2668 .pico progress:indeterminate { 3182 3182 - background: var(--pico-progress-background-color) 3183 3183 - linear-gradient( 3184 3184 - to right, 3185 3185 - var(--pico-progress-color) 30%, 3186 3186 - var(--pico-progress-background-color) 30% 3187 3187 - ) 2669 2669 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 3188 2670 top left/150% 150% no-repeat; 3189 2671 animation: progress-indeterminate 1s linear infinite; 3190 2672 }

+207 -638

public/css/pico.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 33 30 --pico-form-element-spacing-vertical: 0.75rem; 34 31 --pico-form-element-spacing-horizontal: 1rem; 35 32 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 36 36 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 37 37 - var(--pico-primary-focus); 38 38 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 39 39 - var(--pico-form-element-border-color); 33 33 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 34 34 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 40 35 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 41 36 --pico-nav-element-spacing-vertical: 1rem; 42 37 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 159 154 --pico-font-weight: bolder; 160 155 } 161 156 162 162 - input:not( 163 163 - [type="submit"], 164 164 - [type="button"], 165 165 - [type="reset"], 166 166 - [type="checkbox"], 167 167 - [type="radio"], 168 168 - [type="file"] 169 169 - ), 157 157 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 170 158 :where(select, textarea) { 171 159 --pico-outline-width: 0.0625rem; 172 160 } ··· 196 184 --pico-border-radius: 5rem; 197 185 } 198 186 199 199 - [role="search"]:has( 200 200 - button.secondary:focus, 201 201 - [type="submit"].secondary:focus, 202 202 - [type="button"].secondary:focus, 203 203 - [role="button"].secondary:focus 204 204 - ), 205 205 - [role="group"]:has( 206 206 - button.secondary:focus, 207 207 - [type="submit"].secondary:focus, 208 208 - [type="button"].secondary:focus, 209 209 - [role="button"].secondary:focus 210 210 - ) { 211 211 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 212 212 - var(--pico-secondary-focus); 187 187 + [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), 188 188 + [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) { 189 189 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 213 190 } 214 214 - [role="search"]:has( 215 215 - button.contrast:focus, 216 216 - [type="submit"].contrast:focus, 217 217 - [type="button"].contrast:focus, 218 218 - [role="button"].contrast:focus 219 219 - ), 220 220 - [role="group"]:has( 221 221 - button.contrast:focus, 222 222 - [type="submit"].contrast:focus, 223 223 - [type="button"].contrast:focus, 224 224 - [role="button"].contrast:focus 225 225 - ) { 226 226 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 227 227 - var(--pico-contrast-focus); 191 191 + [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), 192 192 + [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) { 193 193 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 228 194 } 229 195 [role="search"] button, 230 196 [role="search"] [type="submit"], ··· 241 207 filter: brightness(0) invert(1); 242 208 } 243 209 244 244 - [aria-busy="true"]:not(input, select, textarea):is( 245 245 - button, 246 246 - [type="submit"], 247 247 - [type="button"], 248 248 - [type="reset"], 249 249 - [role="button"] 250 250 - ):not(.outline)::before { 210 210 + [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline)::before { 251 211 filter: brightness(0) invert(1); 252 212 } 253 213 ··· 293 253 --pico-contrast-hover-underline: var(--pico-secondary-hover); 294 254 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 295 255 --pico-contrast-inverse: #fff; 296 296 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 297 297 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 298 298 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 299 299 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 300 300 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 301 301 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 302 302 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 256 256 + --pico-box-shadow: 257 257 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 258 258 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 259 259 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 303 260 --pico-h1-color: #2d3138; 304 261 --pico-h2-color: #373c44; 305 262 --pico-h3-color: #424751; ··· 331 288 --pico-form-element-disabled-opacity: 0.5; 332 289 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 333 290 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 334 334 - --pico-form-element-invalid-focus-color: var( 335 335 - --pico-form-element-invalid-active-border-color 336 336 - ); 291 291 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 337 292 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 338 293 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 339 339 - --pico-form-element-valid-focus-color: var( 340 340 - --pico-form-element-valid-active-border-color 341 341 - ); 294 294 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 342 295 --pico-switch-background-color: #bfc7d9; 343 296 --pico-switch-checked-background-color: var(--pico-primary-background); 344 297 --pico-switch-color: #fff; ··· 370 323 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 371 324 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 372 325 } 373 373 - [data-theme="light"] 374 374 - input:is( 375 375 - [type="submit"], 376 376 - [type="button"], 377 377 - [type="reset"], 378 378 - [type="checkbox"], 379 379 - [type="radio"], 380 380 - [type="file"] 381 381 - ), 382 382 - :root:not([data-theme="dark"]) 383 383 - input:is( 384 384 - [type="submit"], 385 385 - [type="button"], 386 386 - [type="reset"], 387 387 - [type="checkbox"], 388 388 - [type="radio"], 389 389 - [type="file"] 390 390 - ), 391 391 - :host(:not([data-theme="dark"])) 392 392 - input:is( 393 393 - [type="submit"], 394 394 - [type="button"], 395 395 - [type="reset"], 396 396 - [type="checkbox"], 397 397 - [type="radio"], 398 398 - [type="file"] 399 399 - ) { 326 326 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 327 327 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 328 328 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 400 329 --pico-form-element-focus-color: var(--pico-primary-focus); 401 330 } 402 331 ··· 439 368 --pico-contrast-hover-underline: var(--pico-contrast-hover); 440 369 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 441 370 --pico-contrast-inverse: #000; 442 442 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 443 443 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 444 444 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 445 445 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 446 446 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 447 447 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 371 371 + --pico-box-shadow: 372 372 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 373 373 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 374 374 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 448 375 --pico-h1-color: #f0f1f3; 449 376 --pico-h2-color: #e0e3e7; 450 377 --pico-h3-color: #c2c7d0; ··· 476 403 --pico-form-element-disabled-opacity: 0.5; 477 404 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 478 405 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 479 479 - --pico-form-element-invalid-focus-color: var( 480 480 - --pico-form-element-invalid-active-border-color 481 481 - ); 406 406 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 482 407 --pico-form-element-valid-border-color: #2a7b6f; 483 408 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 484 484 - --pico-form-element-valid-focus-color: var( 485 485 - --pico-form-element-valid-active-border-color 486 486 - ); 409 409 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 487 410 --pico-switch-background-color: #333c4e; 488 411 --pico-switch-checked-background-color: var(--pico-primary-background); 489 412 --pico-switch-color: #fff; ··· 515 438 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 516 439 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 517 440 } 518 518 - :root:not([data-theme]) 519 519 - input:is( 520 520 - [type="submit"], 521 521 - [type="button"], 522 522 - [type="reset"], 523 523 - [type="checkbox"], 524 524 - [type="radio"], 525 525 - [type="file"] 526 526 - ), 527 527 - :host(:not([data-theme])) 528 528 - input:is( 529 529 - [type="submit"], 530 530 - [type="button"], 531 531 - [type="reset"], 532 532 - [type="checkbox"], 533 533 - [type="radio"], 534 534 - [type="file"] 535 535 - ) { 441 441 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 442 442 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 536 443 --pico-form-element-focus-color: var(--pico-primary-focus); 537 444 } 538 538 - :root:not([data-theme]) 539 539 - details 540 540 - summary[role="button"].contrast:not(.outline)::after, 541 541 - :host(:not([data-theme])) 542 542 - details 543 543 - summary[role="button"].contrast:not(.outline)::after { 445 445 + :root:not([data-theme]) details summary[role="button"].contrast:not(.outline)::after, 446 446 + :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline)::after { 544 447 filter: brightness(0); 545 448 } 546 449 :root:not([data-theme]) 547 547 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 548 548 - button, 549 549 - [type="submit"], 550 550 - [type="button"], 551 551 - [type="reset"], 552 552 - [role="button"] 553 553 - ):not(.outline)::before, 450 450 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 451 451 + .outline 452 452 + )::before, 554 453 :host(:not([data-theme])) 555 555 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 556 556 - button, 557 557 - [type="submit"], 558 558 - [type="button"], 559 559 - [type="reset"], 560 560 - [role="button"] 561 561 - ):not(.outline)::before { 454 454 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 455 455 + .outline 456 456 + )::before { 562 457 filter: brightness(0); 563 458 } 564 459 } ··· 599 494 --pico-contrast-hover-underline: var(--pico-contrast-hover); 600 495 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 601 496 --pico-contrast-inverse: #000; 602 602 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 603 603 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 604 604 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 605 605 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 606 606 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 607 607 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 497 497 + --pico-box-shadow: 498 498 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 499 499 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 500 500 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 608 501 --pico-h1-color: #f0f1f3; 609 502 --pico-h2-color: #e0e3e7; 610 503 --pico-h3-color: #c2c7d0; ··· 636 529 --pico-form-element-disabled-opacity: 0.5; 637 530 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 638 531 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 639 639 - --pico-form-element-invalid-focus-color: var( 640 640 - --pico-form-element-invalid-active-border-color 641 641 - ); 532 532 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 642 533 --pico-form-element-valid-border-color: #2a7b6f; 643 534 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 644 644 - --pico-form-element-valid-focus-color: var( 645 645 - --pico-form-element-valid-active-border-color 646 646 - ); 535 535 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 647 536 --pico-switch-background-color: #333c4e; 648 537 --pico-switch-checked-background-color: var(--pico-primary-background); 649 538 --pico-switch-color: #fff; ··· 675 564 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 676 565 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 677 566 } 678 678 - [data-theme="dark"] 679 679 - input:is( 680 680 - [type="submit"], 681 681 - [type="button"], 682 682 - [type="reset"], 683 683 - [type="checkbox"], 684 684 - [type="radio"], 685 685 - [type="file"] 686 686 - ) { 567 567 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 687 568 --pico-form-element-focus-color: var(--pico-primary-focus); 688 569 } 689 689 - [data-theme="dark"] 690 690 - details 691 691 - summary[role="button"].contrast:not(.outline)::after { 570 570 + [data-theme="dark"] details summary[role="button"].contrast:not(.outline)::after { 692 571 filter: brightness(0); 693 572 } 694 573 [data-theme="dark"] 695 695 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 696 696 - button, 697 697 - [type="submit"], 698 698 - [type="button"], 699 699 - [type="reset"], 700 700 - [role="button"] 701 701 - ):not(.outline)::before { 574 574 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 575 575 + .outline 576 576 + )::before { 702 577 filter: brightness(0); 703 578 } 704 579 ··· 915 790 --pico-color: var(--pico-h6-color); 916 791 } 917 792 918 918 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 919 919 - ~ :is(h1, h2, h3, h4, h5, h6) { 793 793 + :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 920 794 margin-top: var(--pico-typography-spacing-top); 921 795 } 922 796 ··· 1009 883 text-decoration: var(--pico-text-decoration); 1010 884 text-decoration-color: var(--pico-underline); 1011 885 text-underline-offset: 0.125em; 1012 1012 - transition: background-color var(--pico-transition), 1013 1013 - color var(--pico-transition), box-shadow var(--pico-transition), 886 886 + transition: 887 887 + background-color var(--pico-transition), 888 888 + color var(--pico-transition), 889 889 + box-shadow var(--pico-transition), 1014 890 -webkit-text-decoration var(--pico-transition); 1015 1015 - transition: background-color var(--pico-transition), 1016 1016 - color var(--pico-transition), text-decoration var(--pico-transition), 891 891 + transition: 892 892 + background-color var(--pico-transition), 893 893 + color var(--pico-transition), 894 894 + text-decoration var(--pico-transition), 1017 895 box-shadow var(--pico-transition); 1018 1018 - transition: background-color var(--pico-transition), 1019 1019 - color var(--pico-transition), text-decoration var(--pico-transition), 896 896 + transition: 897 897 + background-color var(--pico-transition), 898 898 + color var(--pico-transition), 899 899 + text-decoration var(--pico-transition), 1020 900 box-shadow var(--pico-transition), 1021 901 -webkit-text-decoration var(--pico-transition); 1022 902 } 1023 1023 - :where(a:not([role="button"])):is( 1024 1024 - [aria-current]:not([aria-current="false"]), 1025 1025 - :hover, 1026 1026 - :active, 1027 1027 - :focus 1028 1028 - ), 1029 1029 - [role="link"]:is( 1030 1030 - [aria-current]:not([aria-current="false"]), 1031 1031 - :hover, 1032 1032 - :active, 1033 1033 - :focus 1034 1034 - ) { 903 903 + :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 904 904 + [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1035 905 --pico-color: var(--pico-primary-hover); 1036 906 --pico-underline: var(--pico-primary-hover-underline); 1037 907 --pico-text-decoration: underline; ··· 1045 915 --pico-color: var(--pico-secondary); 1046 916 --pico-underline: var(--pico-secondary-underline); 1047 917 } 1048 1048 - :where(a:not([role="button"])).secondary:is( 1049 1049 - [aria-current]:not([aria-current="false"]), 1050 1050 - :hover, 1051 1051 - :active, 1052 1052 - :focus 1053 1053 - ), 1054 1054 - [role="link"].secondary:is( 1055 1055 - [aria-current]:not([aria-current="false"]), 1056 1056 - :hover, 1057 1057 - :active, 1058 1058 - :focus 1059 1059 - ) { 918 918 + :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 919 919 + [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1060 920 --pico-color: var(--pico-secondary-hover); 1061 921 --pico-underline: var(--pico-secondary-hover-underline); 1062 922 } ··· 1065 925 --pico-color: var(--pico-contrast); 1066 926 --pico-underline: var(--pico-contrast-underline); 1067 927 } 1068 1068 - :where(a:not([role="button"])).contrast:is( 1069 1069 - [aria-current]:not([aria-current="false"]), 1070 1070 - :hover, 1071 1071 - :active, 1072 1072 - :focus 1073 1073 - ), 1074 1074 - [role="link"].contrast:is( 1075 1075 - [aria-current]:not([aria-current="false"]), 1076 1076 - :hover, 1077 1077 - :active, 1078 1078 - :focus 1079 1079 - ) { 928 928 + :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 929 929 + [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1080 930 --pico-color: var(--pico-contrast-hover); 1081 931 --pico-underline: var(--pico-contrast-hover-underline); 1082 932 } ··· 1112 962 --pico-border-color: var(--pico-primary-border); 1113 963 --pico-color: var(--pico-primary-inverse); 1114 964 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 1115 1115 - padding: var(--pico-form-element-spacing-vertical) 1116 1116 - var(--pico-form-element-spacing-horizontal); 965 965 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1117 966 border: var(--pico-border-width) solid var(--pico-border-color); 1118 967 border-radius: var(--pico-border-radius); 1119 968 outline: none; ··· 1129 978 -webkit-user-select: none; 1130 979 -moz-user-select: none; 1131 980 user-select: none; 1132 1132 - transition: background-color var(--pico-transition), 1133 1133 - border-color var(--pico-transition), color var(--pico-transition), 981 981 + transition: 982 982 + background-color var(--pico-transition), 983 983 + border-color var(--pico-transition), 984 984 + color var(--pico-transition), 1134 985 box-shadow var(--pico-transition); 1135 986 } 1136 987 button:is([aria-current]:not([aria-current="false"])), ··· 1141 992 [type="reset"]:is(:hover, :active, :focus), 1142 993 [type="button"]:is([aria-current]:not([aria-current="false"])), 1143 994 [type="button"]:is(:hover, :active, :focus), 1144 1144 - [type="file"]::file-selector-button:is( 1145 1145 - [aria-current]:not([aria-current="false"]) 1146 1146 - ), 995 995 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 1147 996 [type="file"]::file-selector-button:is(:hover, :active, :focus), 1148 997 [role="button"]:is([aria-current]:not([aria-current="false"])), 1149 998 [role="button"]:is(:hover, :active, :focus) { ··· 1161 1010 [type="button"]:focus, 1162 1011 [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 1163 1012 [type="file"]::file-selector-button:focus, 1164 1164 - [type="file"]::file-selector-button:is( 1165 1165 - [aria-current]:not([aria-current="false"]) 1166 1166 - ):focus, 1013 1013 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 1167 1014 [role="button"]:focus, 1168 1015 [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 1169 1169 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1170 1170 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1016 1016 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1171 1017 } 1172 1018 1173 1019 [type="submit"], ··· 1184 1030 --pico-color: var(--pico-secondary-inverse); 1185 1031 cursor: pointer; 1186 1032 } 1187 1187 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is( 1188 1188 - [aria-current]:not([aria-current="false"]), 1189 1189 - :hover, 1190 1190 - :active, 1191 1191 - :focus 1192 1192 - ), 1193 1193 - [type="reset"]:is( 1194 1194 - [aria-current]:not([aria-current="false"]), 1195 1195 - :hover, 1196 1196 - :active, 1197 1197 - :focus 1198 1198 - ), 1199 1199 - [type="file"]::file-selector-button:is( 1200 1200 - [aria-current]:not([aria-current="false"]), 1201 1201 - :hover, 1202 1202 - :active, 1203 1203 - :focus 1204 1204 - ) { 1033 1033 + :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1034 1034 + [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1035 1035 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1205 1036 --pico-background-color: var(--pico-secondary-hover-background); 1206 1037 --pico-border-color: var(--pico-secondary-hover-border); 1207 1038 --pico-color: var(--pico-secondary-inverse); 1208 1039 } 1209 1040 :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus, 1210 1210 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is( 1211 1211 - [aria-current]:not([aria-current="false"]) 1212 1212 - ):focus, 1041 1041 + :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):focus, 1213 1042 [type="reset"]:focus, 1214 1043 [type="reset"]:is([aria-current]:not([aria-current="false"])):focus, 1215 1044 [type="file"]::file-selector-button:focus, 1216 1216 - [type="file"]::file-selector-button:is( 1217 1217 - [aria-current]:not([aria-current="false"]) 1218 1218 - ):focus { 1219 1219 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1220 1220 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1045 1045 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus { 1046 1046 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1221 1047 } 1222 1048 1223 1049 :is(button, [type="submit"], [type="button"], [role="button"]).contrast { ··· 1225 1051 --pico-border-color: var(--pico-contrast-border); 1226 1052 --pico-color: var(--pico-contrast-inverse); 1227 1053 } 1228 1228 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is( 1229 1229 - [aria-current]:not([aria-current="false"]), 1230 1230 - :hover, 1231 1231 - :active, 1232 1232 - :focus 1233 1233 - ) { 1054 1054 + :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1234 1055 --pico-background-color: var(--pico-contrast-hover-background); 1235 1056 --pico-border-color: var(--pico-contrast-hover-border); 1236 1057 --pico-color: var(--pico-contrast-inverse); 1237 1058 } 1238 1059 :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus, 1239 1239 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is( 1240 1240 - [aria-current]:not([aria-current="false"]) 1241 1241 - ):focus { 1242 1242 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1243 1243 - 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 1060 1060 + :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus { 1061 1061 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 1244 1062 } 1245 1063 1246 1064 :is(button, [type="submit"], [type="button"], [role="button"]).outline, ··· 1249 1067 --pico-color: var(--pico-primary); 1250 1068 --pico-border-color: var(--pico-primary); 1251 1069 } 1252 1252 - :is(button, [type="submit"], [type="button"], [role="button"]).outline:is( 1253 1253 - [aria-current]:not([aria-current="false"]), 1254 1254 - :hover, 1255 1255 - :active, 1256 1256 - :focus 1257 1257 - ), 1258 1258 - [type="reset"].outline:is( 1259 1259 - [aria-current]:not([aria-current="false"]), 1260 1260 - :hover, 1261 1261 - :active, 1262 1262 - :focus 1263 1263 - ) { 1070 1070 + :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1071 1071 + [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1264 1072 --pico-background-color: transparent; 1265 1073 --pico-color: var(--pico-primary-hover); 1266 1074 --pico-border-color: var(--pico-primary-hover); 1267 1075 } 1268 1076 1269 1269 - :is( 1270 1270 - button, 1271 1271 - [type="submit"], 1272 1272 - [type="button"], 1273 1273 - [role="button"] 1274 1274 - ).outline.secondary, 1077 1077 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, 1275 1078 [type="reset"].outline { 1276 1079 --pico-color: var(--pico-secondary); 1277 1080 --pico-border-color: var(--pico-secondary); 1278 1081 } 1279 1279 - :is( 1280 1280 - button, 1281 1281 - [type="submit"], 1282 1282 - [type="button"], 1283 1283 - [role="button"] 1284 1284 - ).outline.secondary:is( 1285 1285 - [aria-current]:not([aria-current="false"]), 1286 1286 - :hover, 1287 1287 - :active, 1288 1288 - :focus 1289 1289 - ), 1290 1290 - [type="reset"].outline:is( 1291 1291 - [aria-current]:not([aria-current="false"]), 1292 1292 - :hover, 1293 1293 - :active, 1294 1294 - :focus 1295 1295 - ) { 1082 1082 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1083 1083 + [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1296 1084 --pico-color: var(--pico-secondary-hover); 1297 1085 --pico-border-color: var(--pico-secondary-hover); 1298 1086 } 1299 1087 1300 1300 - :is( 1301 1301 - button, 1302 1302 - [type="submit"], 1303 1303 - [type="button"], 1304 1304 - [role="button"] 1305 1305 - ).outline.contrast { 1088 1088 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast { 1306 1089 --pico-color: var(--pico-contrast); 1307 1090 --pico-border-color: var(--pico-contrast); 1308 1091 } 1309 1309 - :is( 1310 1310 - button, 1311 1311 - [type="submit"], 1312 1312 - [type="button"], 1313 1313 - [role="button"] 1314 1314 - ).outline.contrast:is( 1315 1315 - [aria-current]:not([aria-current="false"]), 1316 1316 - :hover, 1317 1317 - :active, 1318 1318 - :focus 1319 1319 - ) { 1092 1092 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1320 1093 --pico-color: var(--pico-contrast-hover); 1321 1094 --pico-border-color: var(--pico-contrast-hover); 1322 1095 } 1323 1096 1324 1324 - :where( 1325 1325 - button, 1326 1326 - [type="submit"], 1327 1327 - [type="reset"], 1328 1328 - [type="button"], 1329 1329 - [role="button"] 1330 1330 - )[disabled], 1331 1331 - :where(fieldset[disabled]) 1332 1332 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1097 1097 + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 1098 1098 + :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1333 1099 opacity: 0.5; 1334 1100 pointer-events: none; 1335 1101 } ··· 1575 1341 } 1576 1342 1577 1343 input:not([type="checkbox"], [type="radio"], [type="range"]) { 1578 1578 - height: calc( 1579 1579 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1580 1580 - var(--pico-border-width) * 2 1581 1581 - ); 1344 1344 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1582 1345 } 1583 1346 1584 1347 fieldset { ··· 1614 1377 -webkit-appearance: none; 1615 1378 -moz-appearance: none; 1616 1379 appearance: none; 1617 1617 - padding: var(--pico-form-element-spacing-vertical) 1618 1618 - var(--pico-form-element-spacing-horizontal); 1380 1380 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1619 1381 } 1620 1382 1621 1383 input, ··· 1632 1394 box-shadow: var(--pico-box-shadow); 1633 1395 color: var(--pico-color); 1634 1396 font-weight: var(--pico-font-weight); 1635 1635 - transition: background-color var(--pico-transition), 1636 1636 - border-color var(--pico-transition), color var(--pico-transition), 1397 1397 + transition: 1398 1398 + background-color var(--pico-transition), 1399 1399 + border-color var(--pico-transition), 1400 1400 + color var(--pico-transition), 1637 1401 box-shadow var(--pico-transition); 1638 1402 } 1639 1403 1640 1640 - input:not( 1641 1641 - [type="submit"], 1642 1642 - [type="button"], 1643 1643 - [type="reset"], 1644 1644 - [type="checkbox"], 1645 1645 - [type="radio"], 1646 1646 - [readonly] 1647 1647 - ):is(:active, :focus), 1404 1404 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1648 1405 :where(select, textarea):not([readonly]):is(:active, :focus) { 1649 1406 --pico-background-color: var(--pico-form-element-active-background-color); 1650 1407 } 1651 1408 1652 1652 - input:not( 1653 1653 - [type="submit"], 1654 1654 - [type="button"], 1655 1655 - [type="reset"], 1656 1656 - [role="switch"], 1657 1657 - [readonly] 1658 1658 - ):is(:active, :focus), 1409 1409 + input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1659 1410 :where(select, textarea):not([readonly]):is(:active, :focus) { 1660 1411 --pico-border-color: var(--pico-form-element-active-border-color); 1661 1412 } 1662 1413 1663 1663 - input:not( 1664 1664 - [type="submit"], 1665 1665 - [type="button"], 1666 1666 - [type="reset"], 1667 1667 - [type="range"], 1668 1668 - [type="file"], 1669 1669 - [readonly] 1670 1670 - ):focus, 1414 1414 + input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1671 1415 :where(select, textarea):not([readonly]):focus { 1672 1672 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1673 1673 - var(--pico-form-element-focus-color); 1416 1416 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1674 1417 } 1675 1418 1676 1419 input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1677 1420 select[disabled], 1678 1421 textarea[disabled], 1679 1422 label[aria-disabled="true"], 1680 1680 - :where(fieldset[disabled]) 1681 1681 - :is( 1682 1682 - input:not([type="submit"], [type="button"], [type="reset"]), 1683 1683 - select, 1684 1684 - textarea 1685 1685 - ) { 1423 1423 + :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1686 1424 opacity: var(--pico-form-element-disabled-opacity); 1687 1425 pointer-events: none; 1688 1426 } ··· 1701 1439 [type="week"], 1702 1440 [type="range"] 1703 1441 )[aria-invalid] { 1704 1704 - padding-right: calc( 1705 1705 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1706 1706 - ) !important; 1442 1442 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1707 1443 padding-left: var(--pico-form-element-spacing-horizontal); 1708 1444 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1709 1709 - padding-inline-end: calc( 1710 1710 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1711 1711 - ) !important; 1445 1445 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1712 1446 background-position: center right 0.75rem; 1713 1447 background-size: 1rem auto; 1714 1448 background-repeat: no-repeat; ··· 1741 1475 --pico-border-color: var(--pico-form-element-valid-border-color); 1742 1476 } 1743 1477 :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1744 1744 - --pico-border-color: var( 1745 1745 - --pico-form-element-valid-active-border-color 1746 1746 - ) !important; 1478 1478 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1747 1479 } 1748 1748 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1749 1749 - [type="checkbox"], 1750 1750 - [type="radio"] 1751 1751 - ) { 1752 1752 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1753 1753 - var(--pico-form-element-valid-focus-color) !important; 1480 1480 + :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1481 1481 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1754 1482 } 1755 1483 :where(input, select, textarea)[aria-invalid="true"] { 1756 1484 --pico-border-color: var(--pico-form-element-invalid-border-color); 1757 1485 } 1758 1486 :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1759 1759 - --pico-border-color: var( 1760 1760 - --pico-form-element-invalid-active-border-color 1761 1761 - ) !important; 1487 1487 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1762 1488 } 1763 1763 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1764 1764 - [type="checkbox"], 1765 1765 - [type="radio"] 1766 1766 - ) { 1767 1767 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1768 1768 - var(--pico-form-element-invalid-focus-color) !important; 1489 1489 + :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1490 1490 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1769 1491 } 1770 1492 1771 1771 - [dir="rtl"] 1772 1772 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1773 1773 - [aria-invalid], 1774 1774 - [aria-invalid="true"], 1775 1775 - [aria-invalid="false"] 1776 1776 - ) { 1493 1493 + [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1777 1494 background-position: center left 0.75rem; 1778 1495 } 1779 1496 ··· 1820 1537 resize: vertical; 1821 1538 } 1822 1539 textarea[aria-invalid] { 1823 1823 - --pico-icon-height: calc( 1824 1824 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1825 1825 - var(--pico-border-width) * 2 1826 1826 - ); 1540 1540 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1827 1541 background-position: top right 0.75rem !important; 1828 1542 background-size: 1rem var(--pico-icon-height) !important; 1829 1543 } ··· 2031 1745 background-size: var(--pico-icon-width) auto; 2032 1746 background-repeat: no-repeat; 2033 1747 } 2034 2034 - input:not( 2035 2035 - [type="checkbox"], 2036 2036 - [type="radio"], 2037 2037 - [type="range"], 2038 2038 - [type="file"] 2039 2039 - )[type="time"] { 1748 1748 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 2040 1749 background-image: var(--pico-icon-time); 2041 1750 } 2042 1751 ··· 2061 1770 background-image: none !important; 2062 1771 } 2063 1772 } 2064 2064 - [dir="rtl"] 2065 2065 - :is( 2066 2066 - [type="date"], 2067 2067 - [type="datetime-local"], 2068 2068 - [type="month"], 2069 2069 - [type="time"], 2070 2070 - [type="week"] 2071 2071 - ) { 1773 1773 + [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 2072 1774 text-align: right; 2073 1775 } 2074 1776 ··· 2086 1788 } 2087 1789 [type="file"]::file-selector-button { 2088 1790 margin-right: calc(var(--pico-spacing) / 2); 2089 2089 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2090 2090 - var(--pico-form-element-spacing-horizontal); 1791 1791 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2091 1792 } 2092 1793 [type="file"]:is(:hover, :active, :focus)::file-selector-button { 2093 1794 --pico-background-color: var(--pico-secondary-hover-background); 2094 1795 --pico-border-color: var(--pico-secondary-hover-border); 2095 1796 } 2096 1797 [type="file"]:focus::file-selector-button { 2097 2097 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 2098 2098 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1798 1798 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 2099 1799 } 2100 1800 2101 1801 /** ··· 2114 1814 height: 0.375rem; 2115 1815 border-radius: var(--pico-border-radius); 2116 1816 background-color: var(--pico-range-border-color); 2117 2117 - -webkit-transition: background-color var(--pico-transition), 1817 1817 + -webkit-transition: 1818 1818 + background-color var(--pico-transition), 2118 1819 box-shadow var(--pico-transition); 2119 2119 - transition: background-color var(--pico-transition), 1820 1820 + transition: 1821 1821 + background-color var(--pico-transition), 2120 1822 box-shadow var(--pico-transition); 2121 1823 } 2122 1824 [type="range"]::-moz-range-track { ··· 2124 1826 height: 0.375rem; 2125 1827 border-radius: var(--pico-border-radius); 2126 1828 background-color: var(--pico-range-border-color); 2127 2127 - -moz-transition: background-color var(--pico-transition), 1829 1829 + -moz-transition: 1830 1830 + background-color var(--pico-transition), 2128 1831 box-shadow var(--pico-transition); 2129 2129 - transition: background-color var(--pico-transition), 1832 1832 + transition: 1833 1833 + background-color var(--pico-transition), 2130 1834 box-shadow var(--pico-transition); 2131 1835 } 2132 1836 [type="range"]::-ms-track { ··· 2134 1838 height: 0.375rem; 2135 1839 border-radius: var(--pico-border-radius); 2136 1840 background-color: var(--pico-range-border-color); 2137 2137 - -ms-transition: background-color var(--pico-transition), 1841 1841 + -ms-transition: 1842 1842 + background-color var(--pico-transition), 2138 1843 box-shadow var(--pico-transition); 2139 2139 - transition: background-color var(--pico-transition), 1844 1844 + transition: 1845 1845 + background-color var(--pico-transition), 2140 1846 box-shadow var(--pico-transition); 2141 1847 } 2142 1848 [type="range"]::-webkit-slider-thumb { ··· 2148 1854 border-radius: 50%; 2149 1855 background-color: var(--pico-range-thumb-color); 2150 1856 cursor: pointer; 2151 2151 - -webkit-transition: background-color var(--pico-transition), 1857 1857 + -webkit-transition: 1858 1858 + background-color var(--pico-transition), 2152 1859 transform var(--pico-transition); 2153 2153 - transition: background-color var(--pico-transition), 1860 1860 + transition: 1861 1861 + background-color var(--pico-transition), 2154 1862 transform var(--pico-transition); 2155 1863 } 2156 1864 [type="range"]::-moz-range-thumb { ··· 2162 1870 border-radius: 50%; 2163 1871 background-color: var(--pico-range-thumb-color); 2164 1872 cursor: pointer; 2165 2165 - -moz-transition: background-color var(--pico-transition), 1873 1873 + -moz-transition: 1874 1874 + background-color var(--pico-transition), 2166 1875 transform var(--pico-transition); 2167 2167 - transition: background-color var(--pico-transition), 1876 1876 + transition: 1877 1877 + background-color var(--pico-transition), 2168 1878 transform var(--pico-transition); 2169 1879 } 2170 1880 [type="range"]::-ms-thumb { ··· 2176 1886 border-radius: 50%; 2177 1887 background-color: var(--pico-range-thumb-color); 2178 1888 cursor: pointer; 2179 2179 - -ms-transition: background-color var(--pico-transition), 1889 1889 + -ms-transition: 1890 1890 + background-color var(--pico-transition), 2180 1891 transform var(--pico-transition); 2181 2181 - transition: background-color var(--pico-transition), 1892 1892 + transition: 1893 1893 + background-color var(--pico-transition), 2182 1894 transform var(--pico-transition); 2183 1895 } 2184 1896 [type="range"]:active, ··· 2199 1911 /** 2200 1912 * Input type search 2201 1913 */ 2202 2202 - input:not( 2203 2203 - [type="checkbox"], 2204 2204 - [type="radio"], 2205 2205 - [type="range"], 2206 2206 - [type="file"] 2207 2207 - )[type="search"] { 2208 2208 - padding-inline-start: calc( 2209 2209 - var(--pico-form-element-spacing-horizontal) + 1.75rem 2210 2210 - ); 1914 1914 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1915 1915 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 2211 1916 background-image: var(--pico-icon-search); 2212 2212 - background-position: center left 2213 2213 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1917 1917 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 2214 1918 background-size: 1rem auto; 2215 1919 background-repeat: no-repeat; 2216 1920 } 2217 2217 - input:not( 2218 2218 - [type="checkbox"], 2219 2219 - [type="radio"], 2220 2220 - [type="range"], 2221 2221 - [type="file"] 2222 2222 - )[type="search"][aria-invalid] { 2223 2223 - padding-inline-start: calc( 2224 2224 - var(--pico-form-element-spacing-horizontal) + 1.75rem 2225 2225 - ) !important; 2226 2226 - background-position: center left 1.125rem, center right 0.75rem; 1921 1921 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1922 1922 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1923 1923 + background-position: 1924 1924 + center left 1.125rem, 1925 1925 + center right 0.75rem; 2227 1926 } 2228 2228 - input:not( 2229 2229 - [type="checkbox"], 2230 2230 - [type="radio"], 2231 2231 - [type="range"], 2232 2232 - [type="file"] 2233 2233 - )[type="search"][aria-invalid="false"] { 1927 1927 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 2234 1928 background-image: var(--pico-icon-search), var(--pico-icon-valid); 2235 1929 } 2236 2236 - input:not( 2237 2237 - [type="checkbox"], 2238 2238 - [type="radio"], 2239 2239 - [type="range"], 2240 2240 - [type="file"] 2241 2241 - )[type="search"][aria-invalid="true"] { 1930 1930 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 2242 1931 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 2243 1932 } 2244 1933 2245 2245 - [dir="rtl"] 2246 2246 - :where(input):not( 2247 2247 - [type="checkbox"], 2248 2248 - [type="radio"], 2249 2249 - [type="range"], 2250 2250 - [type="file"] 2251 2251 - )[type="search"] { 1934 1934 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 2252 1935 background-position: center right 1.125rem; 2253 1936 } 2254 2254 - [dir="rtl"] 2255 2255 - :where(input):not( 2256 2256 - [type="checkbox"], 2257 2257 - [type="radio"], 2258 2258 - [type="range"], 2259 2259 - [type="file"] 2260 2260 - )[type="search"][aria-invalid] { 2261 2261 - background-position: center right 1.125rem, center left 0.75rem; 1937 1937 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1938 1938 + background-position: 1939 1939 + center right 1.125rem, 1940 1940 + center left 0.75rem; 2262 1941 } 2263 1942 2264 1943 /** ··· 2350 2029 article > footer { 2351 2030 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2352 2031 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2353 2353 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2354 2354 - var(--pico-block-spacing-horizontal); 2032 2032 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2355 2033 background-color: var(--pico-card-sectioning-background-color); 2356 2034 } 2357 2035 article > header { ··· 2397 2075 } 2398 2076 2399 2077 details.dropdown > summary:not([role]) { 2400 2400 - height: calc( 2401 2401 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 2402 2402 - var(--pico-border-width) * 2 2403 2403 - ); 2404 2404 - padding: var(--pico-form-element-spacing-vertical) 2405 2405 - var(--pico-form-element-spacing-horizontal); 2078 2078 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 2079 2079 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 2406 2080 border: var(--pico-border-width) solid var(--pico-form-element-border-color); 2407 2081 border-radius: var(--pico-border-radius); 2408 2082 background-color: var(--pico-form-element-background-color); ··· 2412 2086 -webkit-user-select: none; 2413 2087 -moz-user-select: none; 2414 2088 user-select: none; 2415 2415 - transition: background-color var(--pico-transition), 2416 2416 - border-color var(--pico-transition), color var(--pico-transition), 2089 2089 + transition: 2090 2090 + background-color var(--pico-transition), 2091 2091 + border-color var(--pico-transition), 2092 2092 + color var(--pico-transition), 2417 2093 box-shadow var(--pico-transition); 2418 2094 } 2419 2095 details.dropdown > summary:not([role]):active, ··· 2429 2105 } 2430 2106 details.dropdown > summary:not([role])[aria-invalid="false"] { 2431 2107 --pico-form-element-border-color: var(--pico-form-element-valid-border-color); 2432 2432 - --pico-form-element-active-border-color: var( 2433 2433 - --pico-form-element-valid-focus-color 2434 2434 - ); 2108 2108 + --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); 2435 2109 --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); 2436 2110 } 2437 2111 details.dropdown > summary:not([role])[aria-invalid="true"] { 2438 2112 --pico-form-element-border-color: var(--pico-form-element-invalid-border-color); 2439 2439 - --pico-form-element-active-border-color: var( 2440 2440 - --pico-form-element-invalid-focus-color 2441 2441 - ); 2113 2113 + --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); 2442 2114 --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); 2443 2115 } 2444 2116 ··· 2450 2122 transform: rotate(0deg) translateX(0rem); 2451 2123 } 2452 2124 nav details.dropdown > summary:not([role]) { 2453 2453 - height: calc( 2454 2454 - 1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 2455 2455 - ); 2456 2456 - padding: calc( 2457 2457 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2458 2458 - ) 2459 2459 - var(--pico-nav-link-spacing-horizontal); 2125 2125 + height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); 2126 2126 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2460 2127 } 2461 2128 nav details.dropdown > summary:not([role]):focus-visible { 2462 2129 box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); ··· 2481 2148 color: var(--pico-dropdown-color); 2482 2149 white-space: nowrap; 2483 2150 opacity: 0; 2484 2484 - transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; 2151 2151 + transition: 2152 2152 + opacity var(--pico-transition), 2153 2153 + transform 0s ease-in-out 1s; 2485 2154 } 2486 2155 details.dropdown > summary + ul[dir="rtl"] { 2487 2156 right: 0; ··· 2490 2159 details.dropdown > summary + ul li { 2491 2160 width: 100%; 2492 2161 margin-bottom: 0; 2493 2493 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2494 2494 - var(--pico-form-element-spacing-horizontal); 2162 2162 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2495 2163 list-style: none; 2496 2164 } 2497 2165 details.dropdown > summary + ul li:first-of-type { ··· 2502 2170 } 2503 2171 details.dropdown > summary + ul li a { 2504 2172 display: block; 2505 2505 - margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) 2506 2506 - calc(var(--pico-form-element-spacing-horizontal) * -1); 2507 2507 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2508 2508 - var(--pico-form-element-spacing-horizontal); 2173 2173 + margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); 2174 2174 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2509 2175 overflow: hidden; 2510 2176 border-radius: 0; 2511 2177 color: var(--pico-dropdown-color); ··· 2533 2199 details.dropdown[open] > summary + ul { 2534 2200 transform: scaleY(1); 2535 2201 opacity: 1; 2536 2536 - transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; 2202 2202 + transition: 2203 2203 + opacity var(--pico-transition), 2204 2204 + transform 0s ease-in-out 0s; 2537 2205 } 2538 2206 2539 2207 details.dropdown[open] > summary::before { ··· 2632 2300 width: auto; 2633 2301 } 2634 2302 @supports selector(:has(*)) { 2635 2635 - [role="search"]:has( 2636 2636 - button:focus, 2637 2637 - [type="submit"]:focus, 2638 2638 - [type="button"]:focus, 2639 2639 - [role="button"]:focus 2640 2640 - ), 2641 2641 - [role="group"]:has( 2642 2642 - button:focus, 2643 2643 - [type="submit"]:focus, 2644 2644 - [type="button"]:focus, 2645 2645 - [role="button"]:focus 2646 2646 - ) { 2303 2303 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 2304 2304 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2647 2305 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2648 2306 } 2649 2649 - [role="search"]:has( 2650 2650 - button:focus, 2651 2651 - [type="submit"]:focus, 2652 2652 - [type="button"]:focus, 2653 2653 - [role="button"]:focus 2654 2654 - ) 2655 2655 - input:not([type="checkbox"], [type="radio"]), 2656 2656 - [role="search"]:has( 2657 2657 - button:focus, 2658 2658 - [type="submit"]:focus, 2659 2659 - [type="button"]:focus, 2660 2660 - [role="button"]:focus 2661 2661 - ) 2662 2662 - select, 2663 2663 - [role="group"]:has( 2664 2664 - button:focus, 2665 2665 - [type="submit"]:focus, 2666 2666 - [type="button"]:focus, 2667 2667 - [role="button"]:focus 2668 2668 - ) 2669 2669 - input:not([type="checkbox"], [type="radio"]), 2670 2670 - [role="group"]:has( 2671 2671 - button:focus, 2672 2672 - [type="submit"]:focus, 2673 2673 - [type="button"]:focus, 2674 2674 - [role="button"]:focus 2675 2675 - ) 2676 2676 - select { 2307 2307 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 2308 2308 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 2309 2309 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 2310 2310 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2677 2311 border-color: transparent; 2678 2312 } 2679 2679 - [role="search"]:has( 2680 2680 - input:not([type="submit"], [type="button"]):focus, 2681 2681 - select:focus 2682 2682 - ), 2683 2683 - [role="group"]:has( 2684 2684 - input:not([type="submit"], [type="button"]):focus, 2685 2685 - select:focus 2686 2686 - ) { 2313 2313 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 2314 2314 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2687 2315 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2688 2316 } 2689 2689 - [role="search"]:has( 2690 2690 - input:not([type="submit"], [type="button"]):focus, 2691 2691 - select:focus 2692 2692 - ) 2693 2693 - button, 2694 2694 - [role="search"]:has( 2695 2695 - input:not([type="submit"], [type="button"]):focus, 2696 2696 - select:focus 2697 2697 - ) 2698 2698 - [type="submit"], 2699 2699 - [role="search"]:has( 2700 2700 - input:not([type="submit"], [type="button"]):focus, 2701 2701 - select:focus 2702 2702 - ) 2703 2703 - [type="button"], 2704 2704 - [role="search"]:has( 2705 2705 - input:not([type="submit"], [type="button"]):focus, 2706 2706 - select:focus 2707 2707 - ) 2708 2708 - [role="button"], 2709 2709 - [role="group"]:has( 2710 2710 - input:not([type="submit"], [type="button"]):focus, 2711 2711 - select:focus 2712 2712 - ) 2713 2713 - button, 2714 2714 - [role="group"]:has( 2715 2715 - input:not([type="submit"], [type="button"]):focus, 2716 2716 - select:focus 2717 2717 - ) 2718 2718 - [type="submit"], 2719 2719 - [role="group"]:has( 2720 2720 - input:not([type="submit"], [type="button"]):focus, 2721 2721 - select:focus 2722 2722 - ) 2723 2723 - [type="button"], 2724 2724 - [role="group"]:has( 2725 2725 - input:not([type="submit"], [type="button"]):focus, 2726 2726 - select:focus 2727 2727 - ) 2728 2728 - [role="button"] { 2729 2729 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2730 2730 - var(--pico-primary-border); 2731 2731 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2732 2732 - var(--pico-primary-hover-border); 2317 2317 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 2318 2318 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 2319 2319 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 2320 2320 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 2321 2321 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 2322 2322 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 2323 2323 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 2324 2324 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 2325 2325 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 2326 2326 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2733 2327 } 2734 2328 [role="search"] button:focus, 2735 2329 [role="search"] [type="submit"]:focus, ··· 2770 2364 content: ""; 2771 2365 vertical-align: -0.125em; 2772 2366 } 2773 2773 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2774 2774 - :empty 2775 2775 - )::before { 2367 2367 + [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2776 2368 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2777 2369 } 2778 2370 [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2871 2463 opacity: 0.5; 2872 2464 transition: opacity var(--pico-transition); 2873 2465 } 2874 2874 - dialog 2875 2875 - > article 2876 2876 - .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 2877 2877 - dialog 2878 2878 - > article 2879 2879 - :is(a, button)[rel="prev"]:is( 2880 2880 - [aria-current]:not([aria-current="false"]), 2881 2881 - :hover, 2882 2882 - :active, 2883 2883 - :focus 2884 2884 - ) { 2466 2466 + dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 2467 2467 + dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2885 2468 opacity: 1; 2886 2469 } 2887 2470 dialog:not([open]), ··· 2969 2552 nav li { 2970 2553 display: inline-block; 2971 2554 margin: 0; 2972 2972 - padding: var(--pico-nav-element-spacing-vertical) 2973 2973 - var(--pico-nav-element-spacing-horizontal); 2555 2555 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2974 2556 } 2975 2557 nav li :where(a, [role="link"]) { 2976 2558 display: inline-block; 2977 2977 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2978 2978 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2979 2979 - padding: var(--pico-nav-link-spacing-vertical) 2980 2980 - var(--pico-nav-link-spacing-horizontal); 2559 2559 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2560 2560 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2981 2561 border-radius: var(--pico-border-radius); 2982 2562 } 2983 2563 nav li :where(a, [role="link"]):not(:hover) { ··· 2986 2566 nav li button, 2987 2567 nav li [role="button"], 2988 2568 nav li [type="button"], 2989 2989 - nav 2990 2990 - li 2991 2991 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2569 2569 + nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2992 2570 nav li select { 2993 2571 height: auto; 2994 2572 margin-right: inherit; 2995 2573 margin-bottom: 0; 2996 2574 margin-left: inherit; 2997 2997 - padding: calc( 2998 2998 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2999 2999 - ) 3000 3000 - var(--pico-nav-link-spacing-horizontal); 2575 2575 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 3001 2576 } 3002 2577 nav[aria-label="breadcrumb"] { 3003 2578 align-items: center; ··· 3035 2610 display: block; 3036 2611 } 3037 2612 aside li { 3038 3038 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 3039 3039 - var(--pico-nav-element-spacing-horizontal); 2613 2613 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 3040 2614 } 3041 2615 aside li a { 3042 2616 display: block; ··· 3085 2659 } 3086 2660 @media (prefers-reduced-motion: no-preference) { 3087 2661 progress:indeterminate { 3088 3088 - background: var(--pico-progress-background-color) 3089 3089 - linear-gradient( 3090 3090 - to right, 3091 3091 - var(--pico-progress-color) 30%, 3092 3092 - var(--pico-progress-background-color) 30% 3093 3093 - ) 2662 2662 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 3094 2663 top left/150% 150% no-repeat; 3095 2664 animation: progress-indeterminate 1s linear infinite; 3096 2665 }

+160 -515

public/css/pico.fluid.classless.conditional.green.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 31 28 --pico-form-element-spacing-vertical: 0.75rem; 32 29 --pico-form-element-spacing-horizontal: 1rem; 33 30 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 34 34 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 35 35 - var(--pico-primary-focus); 36 36 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 37 37 - var(--pico-form-element-border-color); 31 31 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 32 32 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 38 33 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 39 34 --pico-nav-element-spacing-vertical: 1rem; 40 35 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 153 148 --pico-font-weight: bolder; 154 149 } 155 150 156 156 - input:not( 157 157 - [type="submit"], 158 158 - [type="button"], 159 159 - [type="reset"], 160 160 - [type="checkbox"], 161 161 - [type="radio"], 162 162 - [type="file"] 163 163 - ), 151 151 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 164 152 :where(select, textarea) { 165 153 --pico-outline-width: 0.0625rem; 166 154 } ··· 197 185 filter: brightness(0) invert(1); 198 186 } 199 187 200 200 - .pico 201 201 - [aria-busy="true"]:not(input, select, textarea):is( 202 202 - button, 203 203 - [type="submit"], 204 204 - [type="button"], 205 205 - [type="reset"], 206 206 - [role="button"] 207 207 - )::before { 188 188 + .pico [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])::before { 208 189 filter: brightness(0) invert(1); 209 190 } 210 191 ··· 250 231 --pico-contrast-hover-underline: var(--pico-secondary-hover); 251 232 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 252 233 --pico-contrast-inverse: #fff; 253 253 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 254 254 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 255 255 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 256 256 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 257 257 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 258 258 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 259 259 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 234 234 + --pico-box-shadow: 235 235 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 236 236 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 237 237 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 260 238 --pico-h1-color: #2d3138; 261 239 --pico-h2-color: #373c44; 262 240 --pico-h3-color: #424751; ··· 288 266 --pico-form-element-disabled-opacity: 0.5; 289 267 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 290 268 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 291 291 - --pico-form-element-invalid-focus-color: var( 292 292 - --pico-form-element-invalid-active-border-color 293 293 - ); 269 269 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 294 270 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 295 271 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 296 296 - --pico-form-element-valid-focus-color: var( 297 297 - --pico-form-element-valid-active-border-color 298 298 - ); 272 272 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 299 273 --pico-switch-background-color: #bfc7d9; 300 274 --pico-switch-checked-background-color: var(--pico-primary-background); 301 275 --pico-switch-color: #fff; ··· 322 296 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 323 297 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 324 298 } 325 325 - [data-theme="light"] 326 326 - input:is( 327 327 - [type="submit"], 328 328 - [type="button"], 329 329 - [type="reset"], 330 330 - [type="checkbox"], 331 331 - [type="radio"], 332 332 - [type="file"] 333 333 - ), 334 334 - :root:not([data-theme="dark"]) 335 335 - input:is( 336 336 - [type="submit"], 337 337 - [type="button"], 338 338 - [type="reset"], 339 339 - [type="checkbox"], 340 340 - [type="radio"], 341 341 - [type="file"] 342 342 - ), 343 343 - :host(:not([data-theme="dark"])) 344 344 - input:is( 345 345 - [type="submit"], 346 346 - [type="button"], 347 347 - [type="reset"], 348 348 - [type="checkbox"], 349 349 - [type="radio"], 350 350 - [type="file"] 351 351 - ) { 299 299 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 300 300 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 301 301 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 352 302 --pico-form-element-focus-color: var(--pico-primary-focus); 353 303 } 354 304 ··· 391 341 --pico-contrast-hover-underline: var(--pico-contrast-hover); 392 342 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 393 343 --pico-contrast-inverse: #000; 394 394 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 395 395 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 396 396 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 397 397 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 398 398 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 399 399 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 344 344 + --pico-box-shadow: 345 345 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 346 346 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 347 347 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 400 348 --pico-h1-color: #f0f1f3; 401 349 --pico-h2-color: #e0e3e7; 402 350 --pico-h3-color: #c2c7d0; ··· 428 376 --pico-form-element-disabled-opacity: 0.5; 429 377 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 430 378 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 431 431 - --pico-form-element-invalid-focus-color: var( 432 432 - --pico-form-element-invalid-active-border-color 433 433 - ); 379 379 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 434 380 --pico-form-element-valid-border-color: #2a7b6f; 435 381 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 436 436 - --pico-form-element-valid-focus-color: var( 437 437 - --pico-form-element-valid-active-border-color 438 438 - ); 382 382 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 439 383 --pico-switch-background-color: #333c4e; 440 384 --pico-switch-checked-background-color: var(--pico-primary-background); 441 385 --pico-switch-color: #fff; ··· 462 406 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 463 407 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 464 408 } 465 465 - :root:not([data-theme]) 466 466 - input:is( 467 467 - [type="submit"], 468 468 - [type="button"], 469 469 - [type="reset"], 470 470 - [type="checkbox"], 471 471 - [type="radio"], 472 472 - [type="file"] 473 473 - ), 474 474 - :host(:not([data-theme])) 475 475 - input:is( 476 476 - [type="submit"], 477 477 - [type="button"], 478 478 - [type="reset"], 479 479 - [type="checkbox"], 480 480 - [type="radio"], 481 481 - [type="file"] 482 482 - ) { 409 409 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 410 410 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 483 411 --pico-form-element-focus-color: var(--pico-primary-focus); 484 412 } 485 413 } ··· 520 448 --pico-contrast-hover-underline: var(--pico-contrast-hover); 521 449 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 522 450 --pico-contrast-inverse: #000; 523 523 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 524 524 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 525 525 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 526 526 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 527 527 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 528 528 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 451 451 + --pico-box-shadow: 452 452 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 453 453 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 454 454 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 529 455 --pico-h1-color: #f0f1f3; 530 456 --pico-h2-color: #e0e3e7; 531 457 --pico-h3-color: #c2c7d0; ··· 557 483 --pico-form-element-disabled-opacity: 0.5; 558 484 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 559 485 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 560 560 - --pico-form-element-invalid-focus-color: var( 561 561 - --pico-form-element-invalid-active-border-color 562 562 - ); 486 486 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 563 487 --pico-form-element-valid-border-color: #2a7b6f; 564 488 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 565 565 - --pico-form-element-valid-focus-color: var( 566 566 - --pico-form-element-valid-active-border-color 567 567 - ); 489 489 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 568 490 --pico-switch-background-color: #333c4e; 569 491 --pico-switch-checked-background-color: var(--pico-primary-background); 570 492 --pico-switch-color: #fff; ··· 591 513 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 592 514 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 593 515 } 594 594 - [data-theme="dark"] 595 595 - input:is( 596 596 - [type="submit"], 597 597 - [type="button"], 598 598 - [type="reset"], 599 599 - [type="checkbox"], 600 600 - [type="radio"], 601 601 - [type="file"] 602 602 - ) { 516 516 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 603 517 --pico-form-element-focus-color: var(--pico-primary-focus); 604 518 } 605 519 ··· 753 667 --pico-color: var(--pico-h6-color); 754 668 } 755 669 756 756 - .pico 757 757 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 758 758 - ~ :is(h1, h2, h3, h4, h5, h6) { 670 670 + .pico :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 759 671 margin-top: var(--pico-typography-spacing-top); 760 672 } 761 673 ··· 848 760 text-decoration: var(--pico-text-decoration); 849 761 text-decoration-color: var(--pico-underline); 850 762 text-underline-offset: 0.125em; 851 851 - transition: background-color var(--pico-transition), 852 852 - color var(--pico-transition), box-shadow var(--pico-transition), 763 763 + transition: 764 764 + background-color var(--pico-transition), 765 765 + color var(--pico-transition), 766 766 + box-shadow var(--pico-transition), 853 767 -webkit-text-decoration var(--pico-transition); 854 854 - transition: background-color var(--pico-transition), 855 855 - color var(--pico-transition), text-decoration var(--pico-transition), 768 768 + transition: 769 769 + background-color var(--pico-transition), 770 770 + color var(--pico-transition), 771 771 + text-decoration var(--pico-transition), 856 772 box-shadow var(--pico-transition); 857 857 - transition: background-color var(--pico-transition), 858 858 - color var(--pico-transition), text-decoration var(--pico-transition), 773 773 + transition: 774 774 + background-color var(--pico-transition), 775 775 + color var(--pico-transition), 776 776 + text-decoration var(--pico-transition), 859 777 box-shadow var(--pico-transition), 860 778 -webkit-text-decoration var(--pico-transition); 861 779 } 862 862 - .pico 863 863 - :where(a:not([role="button"])):is( 864 864 - [aria-current]:not([aria-current="false"]), 865 865 - :hover, 866 866 - :active, 867 867 - :focus 868 868 - ), 869 869 - .pico 870 870 - [role="link"]:is( 871 871 - [aria-current]:not([aria-current="false"]), 872 872 - :hover, 873 873 - :active, 874 874 - :focus 875 875 - ) { 780 780 + .pico :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 781 781 + .pico [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 876 782 --pico-color: var(--pico-primary-hover); 877 783 --pico-underline: var(--pico-primary-hover-underline); 878 784 --pico-text-decoration: underline; ··· 913 819 --pico-border-color: var(--pico-primary-border); 914 820 --pico-color: var(--pico-primary-inverse); 915 821 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 916 916 - padding: var(--pico-form-element-spacing-vertical) 917 917 - var(--pico-form-element-spacing-horizontal); 822 822 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 918 823 border: var(--pico-border-width) solid var(--pico-border-color); 919 824 border-radius: var(--pico-border-radius); 920 825 outline: none; ··· 930 835 -webkit-user-select: none; 931 836 -moz-user-select: none; 932 837 user-select: none; 933 933 - transition: background-color var(--pico-transition), 934 934 - border-color var(--pico-transition), color var(--pico-transition), 838 838 + transition: 839 839 + background-color var(--pico-transition), 840 840 + border-color var(--pico-transition), 841 841 + color var(--pico-transition), 935 842 box-shadow var(--pico-transition); 936 843 } 937 844 .pico button:is([aria-current]:not([aria-current="false"])), ··· 942 849 .pico [type="reset"]:is(:hover, :active, :focus), 943 850 .pico [type="button"]:is([aria-current]:not([aria-current="false"])), 944 851 .pico [type="button"]:is(:hover, :active, :focus), 945 945 - .pico 946 946 - [type="file"]::file-selector-button:is( 947 947 - [aria-current]:not([aria-current="false"]) 948 948 - ), 852 852 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 949 853 .pico [type="file"]::file-selector-button:is(:hover, :active, :focus), 950 854 .pico [role="button"]:is([aria-current]:not([aria-current="false"])), 951 855 .pico [role="button"]:is(:hover, :active, :focus) { ··· 963 867 .pico [type="button"]:focus, 964 868 .pico [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 965 869 .pico [type="file"]::file-selector-button:focus, 966 966 - .pico 967 967 - [type="file"]::file-selector-button:is( 968 968 - [aria-current]:not([aria-current="false"]) 969 969 - ):focus, 870 870 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 970 871 .pico [role="button"]:focus, 971 872 .pico [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 972 972 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 973 973 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 873 873 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 974 874 } 975 875 976 876 .pico [type="submit"], ··· 986 886 --pico-color: var(--pico-secondary-inverse); 987 887 cursor: pointer; 988 888 } 989 989 - .pico 990 990 - [type="reset"]:is( 991 991 - [aria-current]:not([aria-current="false"]), 992 992 - :hover, 993 993 - :active, 994 994 - :focus 995 995 - ), 996 996 - .pico 997 997 - [type="file"]::file-selector-button:is( 998 998 - [aria-current]:not([aria-current="false"]), 999 999 - :hover, 1000 1000 - :active, 1001 1001 - :focus 1002 1002 - ) { 889 889 + .pico [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 890 890 + .pico [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1003 891 --pico-background-color: var(--pico-secondary-hover-background); 1004 892 --pico-border-color: var(--pico-secondary-hover-border); 1005 893 --pico-color: var(--pico-secondary-inverse); 1006 894 } 1007 895 .pico [type="reset"]:focus, 1008 896 .pico [type="file"]::file-selector-button:focus { 1009 1009 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1010 1010 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 897 897 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1011 898 } 1012 899 1013 1013 - .pico 1014 1014 - :where( 1015 1015 - button, 1016 1016 - [type="submit"], 1017 1017 - [type="reset"], 1018 1018 - [type="button"], 1019 1019 - [role="button"] 1020 1020 - )[disabled], 1021 1021 - .pico 1022 1022 - :where(fieldset[disabled]) 1023 1023 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 900 900 + .pico :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 901 901 + .pico :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1024 902 opacity: 0.5; 1025 903 pointer-events: none; 1026 904 } ··· 1266 1144 } 1267 1145 1268 1146 .pico input:not([type="checkbox"], [type="radio"], [type="range"]) { 1269 1269 - height: calc( 1270 1270 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1271 1271 - var(--pico-border-width) * 2 1272 1272 - ); 1147 1147 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1273 1148 } 1274 1149 1275 1150 .pico fieldset { ··· 1299 1174 width: 100%; 1300 1175 } 1301 1176 1302 1302 - .pico 1303 1303 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 1177 1177 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 1304 1178 .pico select, 1305 1179 .pico textarea { 1306 1180 -webkit-appearance: none; 1307 1181 -moz-appearance: none; 1308 1182 appearance: none; 1309 1309 - padding: var(--pico-form-element-spacing-vertical) 1310 1310 - var(--pico-form-element-spacing-horizontal); 1183 1183 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1311 1184 } 1312 1185 1313 1186 .pico input, ··· 1324 1197 box-shadow: var(--pico-box-shadow); 1325 1198 color: var(--pico-color); 1326 1199 font-weight: var(--pico-font-weight); 1327 1327 - transition: background-color var(--pico-transition), 1328 1328 - border-color var(--pico-transition), color var(--pico-transition), 1200 1200 + transition: 1201 1201 + background-color var(--pico-transition), 1202 1202 + border-color var(--pico-transition), 1203 1203 + color var(--pico-transition), 1329 1204 box-shadow var(--pico-transition); 1330 1205 } 1331 1206 1332 1332 - .pico 1333 1333 - input:not( 1334 1334 - [type="submit"], 1335 1335 - [type="button"], 1336 1336 - [type="reset"], 1337 1337 - [type="checkbox"], 1338 1338 - [type="radio"], 1339 1339 - [readonly] 1340 1340 - ):is(:active, :focus), 1207 1207 + .pico input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1341 1208 .pico :where(select, textarea):not([readonly]):is(:active, :focus) { 1342 1209 --pico-background-color: var(--pico-form-element-active-background-color); 1343 1210 } 1344 1211 1345 1345 - .pico 1346 1346 - input:not( 1347 1347 - [type="submit"], 1348 1348 - [type="button"], 1349 1349 - [type="reset"], 1350 1350 - [role="switch"], 1351 1351 - [readonly] 1352 1352 - ):is(:active, :focus), 1212 1212 + .pico input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1353 1213 .pico :where(select, textarea):not([readonly]):is(:active, :focus) { 1354 1214 --pico-border-color: var(--pico-form-element-active-border-color); 1355 1215 } 1356 1216 1357 1357 - .pico 1358 1358 - input:not( 1359 1359 - [type="submit"], 1360 1360 - [type="button"], 1361 1361 - [type="reset"], 1362 1362 - [type="range"], 1363 1363 - [type="file"], 1364 1364 - [readonly] 1365 1365 - ):focus, 1217 1217 + .pico input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1366 1218 .pico :where(select, textarea):not([readonly]):focus { 1367 1367 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1368 1368 - var(--pico-form-element-focus-color); 1219 1219 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1369 1220 } 1370 1221 1371 1222 .pico input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1372 1223 .pico select[disabled], 1373 1224 .pico textarea[disabled], 1374 1225 .pico label[aria-disabled="true"], 1375 1375 - .pico 1376 1376 - :where(fieldset[disabled]) 1377 1377 - :is( 1378 1378 - input:not([type="submit"], [type="button"], [type="reset"]), 1379 1379 - select, 1380 1380 - textarea 1381 1381 - ) { 1226 1226 + .pico :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1382 1227 opacity: var(--pico-form-element-disabled-opacity); 1383 1228 pointer-events: none; 1384 1229 } ··· 1398 1243 [type="week"], 1399 1244 [type="range"] 1400 1245 )[aria-invalid] { 1401 1401 - padding-right: calc( 1402 1402 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1403 1403 - ) !important; 1246 1246 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1404 1247 padding-left: var(--pico-form-element-spacing-horizontal); 1405 1248 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1406 1406 - padding-inline-end: calc( 1407 1407 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1408 1408 - ) !important; 1249 1249 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1409 1250 background-position: center right 0.75rem; 1410 1251 background-size: 1rem auto; 1411 1252 background-repeat: no-repeat; ··· 1439 1280 .pico :where(input, select, textarea)[aria-invalid="false"] { 1440 1281 --pico-border-color: var(--pico-form-element-valid-border-color); 1441 1282 } 1442 1442 - .pico 1443 1443 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1444 1444 - --pico-border-color: var( 1445 1445 - --pico-form-element-valid-active-border-color 1446 1446 - ) !important; 1283 1283 + .pico :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1284 1284 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1447 1285 } 1448 1448 - .pico 1449 1449 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1450 1450 - [type="checkbox"], 1451 1451 - [type="radio"] 1452 1452 - ) { 1453 1453 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1454 1454 - var(--pico-form-element-valid-focus-color) !important; 1286 1286 + .pico :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1287 1287 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1455 1288 } 1456 1289 .pico :where(input, select, textarea)[aria-invalid="true"] { 1457 1290 --pico-border-color: var(--pico-form-element-invalid-border-color); 1458 1291 } 1459 1292 .pico :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1460 1460 - --pico-border-color: var( 1461 1461 - --pico-form-element-invalid-active-border-color 1462 1462 - ) !important; 1293 1293 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1463 1294 } 1464 1464 - .pico 1465 1465 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1466 1466 - [type="checkbox"], 1467 1467 - [type="radio"] 1468 1468 - ) { 1469 1469 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1470 1470 - var(--pico-form-element-invalid-focus-color) !important; 1295 1295 + .pico :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1296 1296 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1471 1297 } 1472 1298 1473 1473 - [dir="rtl"] 1474 1474 - .pico 1475 1475 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1476 1476 - [aria-invalid], 1477 1477 - [aria-invalid="true"], 1478 1478 - [aria-invalid="false"] 1479 1479 - ) { 1299 1299 + [dir="rtl"] .pico :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1480 1300 background-position: center left 0.75rem; 1481 1301 } 1482 1302 ··· 1523 1343 resize: vertical; 1524 1344 } 1525 1345 .pico textarea[aria-invalid] { 1526 1526 - --pico-icon-height: calc( 1527 1527 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1528 1528 - var(--pico-border-width) * 2 1529 1529 - ); 1346 1346 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1530 1347 background-position: top right 0.75rem !important; 1531 1348 background-size: 1rem var(--pico-icon-height) !important; 1532 1349 } ··· 1735 1552 background-size: var(--pico-icon-width) auto; 1736 1553 background-repeat: no-repeat; 1737 1554 } 1738 1738 - .pico 1739 1739 - input:not( 1740 1740 - [type="checkbox"], 1741 1741 - [type="radio"], 1742 1742 - [type="range"], 1743 1743 - [type="file"] 1744 1744 - )[type="time"] { 1555 1555 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 1745 1556 background-image: var(--pico-icon-time); 1746 1557 } 1747 1558 ··· 1766 1577 background-image: none !important; 1767 1578 } 1768 1579 } 1769 1769 - [dir="rtl"] 1770 1770 - .pico 1771 1771 - :is( 1772 1772 - [type="date"], 1773 1773 - [type="datetime-local"], 1774 1774 - [type="month"], 1775 1775 - [type="time"], 1776 1776 - [type="week"] 1777 1777 - ) { 1580 1580 + [dir="rtl"] .pico :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 1778 1581 text-align: right; 1779 1582 } 1780 1583 ··· 1792 1595 } 1793 1596 .pico [type="file"]::file-selector-button { 1794 1597 margin-right: calc(var(--pico-spacing) / 2); 1795 1795 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 1796 1796 - var(--pico-form-element-spacing-horizontal); 1598 1598 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 1797 1599 } 1798 1600 .pico [type="file"]:is(:hover, :active, :focus)::file-selector-button { 1799 1601 --pico-background-color: var(--pico-secondary-hover-background); 1800 1602 --pico-border-color: var(--pico-secondary-hover-border); 1801 1603 } 1802 1604 .pico [type="file"]:focus::file-selector-button { 1803 1803 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1804 1804 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1605 1605 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1805 1606 } 1806 1607 1807 1608 /** ··· 1820 1621 height: 0.375rem; 1821 1622 border-radius: var(--pico-border-radius); 1822 1623 background-color: var(--pico-range-border-color); 1823 1823 - -webkit-transition: background-color var(--pico-transition), 1624 1624 + -webkit-transition: 1625 1625 + background-color var(--pico-transition), 1824 1626 box-shadow var(--pico-transition); 1825 1825 - transition: background-color var(--pico-transition), 1627 1627 + transition: 1628 1628 + background-color var(--pico-transition), 1826 1629 box-shadow var(--pico-transition); 1827 1630 } 1828 1631 .pico [type="range"]::-moz-range-track { ··· 1830 1633 height: 0.375rem; 1831 1634 border-radius: var(--pico-border-radius); 1832 1635 background-color: var(--pico-range-border-color); 1833 1833 - -moz-transition: background-color var(--pico-transition), 1636 1636 + -moz-transition: 1637 1637 + background-color var(--pico-transition), 1834 1638 box-shadow var(--pico-transition); 1835 1835 - transition: background-color var(--pico-transition), 1639 1639 + transition: 1640 1640 + background-color var(--pico-transition), 1836 1641 box-shadow var(--pico-transition); 1837 1642 } 1838 1643 .pico [type="range"]::-ms-track { ··· 1840 1645 height: 0.375rem; 1841 1646 border-radius: var(--pico-border-radius); 1842 1647 background-color: var(--pico-range-border-color); 1843 1843 - -ms-transition: background-color var(--pico-transition), 1648 1648 + -ms-transition: 1649 1649 + background-color var(--pico-transition), 1844 1650 box-shadow var(--pico-transition); 1845 1845 - transition: background-color var(--pico-transition), 1651 1651 + transition: 1652 1652 + background-color var(--pico-transition), 1846 1653 box-shadow var(--pico-transition); 1847 1654 } 1848 1655 .pico [type="range"]::-webkit-slider-thumb { ··· 1854 1661 border-radius: 50%; 1855 1662 background-color: var(--pico-range-thumb-color); 1856 1663 cursor: pointer; 1857 1857 - -webkit-transition: background-color var(--pico-transition), 1664 1664 + -webkit-transition: 1665 1665 + background-color var(--pico-transition), 1858 1666 transform var(--pico-transition); 1859 1859 - transition: background-color var(--pico-transition), 1667 1667 + transition: 1668 1668 + background-color var(--pico-transition), 1860 1669 transform var(--pico-transition); 1861 1670 } 1862 1671 .pico [type="range"]::-moz-range-thumb { ··· 1868 1677 border-radius: 50%; 1869 1678 background-color: var(--pico-range-thumb-color); 1870 1679 cursor: pointer; 1871 1871 - -moz-transition: background-color var(--pico-transition), 1680 1680 + -moz-transition: 1681 1681 + background-color var(--pico-transition), 1872 1682 transform var(--pico-transition); 1873 1873 - transition: background-color var(--pico-transition), 1683 1683 + transition: 1684 1684 + background-color var(--pico-transition), 1874 1685 transform var(--pico-transition); 1875 1686 } 1876 1687 .pico [type="range"]::-ms-thumb { ··· 1882 1693 border-radius: 50%; 1883 1694 background-color: var(--pico-range-thumb-color); 1884 1695 cursor: pointer; 1885 1885 - -ms-transition: background-color var(--pico-transition), 1696 1696 + -ms-transition: 1697 1697 + background-color var(--pico-transition), 1886 1698 transform var(--pico-transition); 1887 1887 - transition: background-color var(--pico-transition), 1699 1699 + transition: 1700 1700 + background-color var(--pico-transition), 1888 1701 transform var(--pico-transition); 1889 1702 } 1890 1703 .pico [type="range"]:active, ··· 1905 1718 /** 1906 1719 * Input type search 1907 1720 */ 1908 1908 - .pico 1909 1909 - input:not( 1910 1910 - [type="checkbox"], 1911 1911 - [type="radio"], 1912 1912 - [type="range"], 1913 1913 - [type="file"] 1914 1914 - )[type="search"] { 1915 1915 - padding-inline-start: calc( 1916 1916 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1917 1917 - ); 1721 1721 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1722 1722 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 1918 1723 background-image: var(--pico-icon-search); 1919 1919 - background-position: center left 1920 1920 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1724 1724 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1921 1725 background-size: 1rem auto; 1922 1726 background-repeat: no-repeat; 1923 1727 } 1924 1924 - .pico 1925 1925 - input:not( 1926 1926 - [type="checkbox"], 1927 1927 - [type="radio"], 1928 1928 - [type="range"], 1929 1929 - [type="file"] 1930 1930 - )[type="search"][aria-invalid] { 1931 1931 - padding-inline-start: calc( 1932 1932 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1933 1933 - ) !important; 1934 1934 - background-position: center left 1.125rem, center right 0.75rem; 1728 1728 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1729 1729 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1730 1730 + background-position: 1731 1731 + center left 1.125rem, 1732 1732 + center right 0.75rem; 1935 1733 } 1936 1936 - .pico 1937 1937 - input:not( 1938 1938 - [type="checkbox"], 1939 1939 - [type="radio"], 1940 1940 - [type="range"], 1941 1941 - [type="file"] 1942 1942 - )[type="search"][aria-invalid="false"] { 1734 1734 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 1943 1735 background-image: var(--pico-icon-search), var(--pico-icon-valid); 1944 1736 } 1945 1945 - .pico 1946 1946 - input:not( 1947 1947 - [type="checkbox"], 1948 1948 - [type="radio"], 1949 1949 - [type="range"], 1950 1950 - [type="file"] 1951 1951 - )[type="search"][aria-invalid="true"] { 1737 1737 + .pico input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 1952 1738 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 1953 1739 } 1954 1740 1955 1955 - [dir="rtl"] 1956 1956 - .pico 1957 1957 - :where(input):not( 1958 1958 - [type="checkbox"], 1959 1959 - [type="radio"], 1960 1960 - [type="range"], 1961 1961 - [type="file"] 1962 1962 - )[type="search"] { 1741 1741 + [dir="rtl"] .pico :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1963 1742 background-position: center right 1.125rem; 1964 1743 } 1965 1965 - [dir="rtl"] 1966 1966 - .pico 1967 1967 - :where(input):not( 1968 1968 - [type="checkbox"], 1969 1969 - [type="radio"], 1970 1970 - [type="range"], 1971 1971 - [type="file"] 1972 1972 - )[type="search"][aria-invalid] { 1973 1973 - background-position: center right 1.125rem, center left 0.75rem; 1744 1744 + [dir="rtl"] .pico :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1745 1745 + background-position: 1746 1746 + center right 1.125rem, 1747 1747 + center left 0.75rem; 1974 1748 } 1975 1749 1976 1750 /** ··· 2062 1836 .pico article > footer { 2063 1837 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2064 1838 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2065 2065 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2066 2066 - var(--pico-block-spacing-horizontal); 1839 1839 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2067 1840 background-color: var(--pico-card-sectioning-background-color); 2068 1841 } 2069 1842 .pico article > header { ··· 2106 1879 margin-bottom: 0; 2107 1880 } 2108 1881 .pico [role="search"] > *:not(:first-child), 2109 2109 - .pico 2110 2110 - [role="search"] 2111 2111 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1882 1882 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2112 1883 .pico [role="search"] select:not(:first-child), 2113 1884 .pico [role="group"] > *:not(:first-child), 2114 2114 - .pico 2115 2115 - [role="group"] 2116 2116 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1885 1885 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2117 1886 .pico [role="group"] select:not(:first-child) { 2118 1887 margin-left: 0; 2119 1888 border-top-left-radius: 0; 2120 1889 border-bottom-left-radius: 0; 2121 1890 } 2122 1891 .pico [role="search"] > *:not(:last-child), 2123 2123 - .pico 2124 2124 - [role="search"] 2125 2125 - input:not([type="checkbox"], [type="radio"]):not(:last-child), 1892 1892 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), 2126 1893 .pico [role="search"] select:not(:last-child), 2127 1894 .pico [role="group"] > *:not(:last-child), 2128 2128 - .pico 2129 2129 - [role="group"] 2130 2130 - input:not([type="checkbox"], [type="radio"]):not(:last-child), 1895 1895 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), 2131 1896 .pico [role="group"] select:not(:last-child) { 2132 1897 border-top-right-radius: 0; 2133 1898 border-bottom-right-radius: 0; ··· 2145 1910 .pico [role="search"] [type="reset"]:not(:first-child), 2146 1911 .pico [role="search"] [type="button"]:not(:first-child), 2147 1912 .pico [role="search"] [role="button"]:not(:first-child), 2148 2148 - .pico 2149 2149 - [role="search"] 2150 2150 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1913 1913 + .pico [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2151 1914 .pico [role="search"] select:not(:first-child), 2152 1915 .pico [role="group"] button:not(:first-child), 2153 1916 .pico [role="group"] [type="submit"]:not(:first-child), 2154 1917 .pico [role="group"] [type="reset"]:not(:first-child), 2155 1918 .pico [role="group"] [type="button"]:not(:first-child), 2156 1919 .pico [role="group"] [role="button"]:not(:first-child), 2157 2157 - .pico 2158 2158 - [role="group"] 2159 2159 - input:not([type="checkbox"], [type="radio"]):not(:first-child), 1920 1920 + .pico [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), 2160 1921 .pico [role="group"] select:not(:first-child) { 2161 1922 margin-left: calc(var(--pico-border-width) * -1); 2162 1923 } ··· 2173 1934 width: auto; 2174 1935 } 2175 1936 @supports selector(:has(*)) { 2176 2176 - .pico 2177 2177 - [role="search"]:has( 2178 2178 - button:focus, 2179 2179 - [type="submit"]:focus, 2180 2180 - [type="button"]:focus, 2181 2181 - [role="button"]:focus 2182 2182 - ), 2183 2183 - .pico 2184 2184 - [role="group"]:has( 2185 2185 - button:focus, 2186 2186 - [type="submit"]:focus, 2187 2187 - [type="button"]:focus, 2188 2188 - [role="button"]:focus 2189 2189 - ) { 1937 1937 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 1938 1938 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2190 1939 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2191 1940 } 2192 2192 - .pico 2193 2193 - [role="search"]:has( 2194 2194 - button:focus, 2195 2195 - [type="submit"]:focus, 2196 2196 - [type="button"]:focus, 2197 2197 - [role="button"]:focus 2198 2198 - ) 2199 2199 - input:not([type="checkbox"], [type="radio"]), 2200 2200 - .pico 2201 2201 - [role="search"]:has( 2202 2202 - button:focus, 2203 2203 - [type="submit"]:focus, 2204 2204 - [type="button"]:focus, 2205 2205 - [role="button"]:focus 2206 2206 - ) 2207 2207 - select, 2208 2208 - .pico 2209 2209 - [role="group"]:has( 2210 2210 - button:focus, 2211 2211 - [type="submit"]:focus, 2212 2212 - [type="button"]:focus, 2213 2213 - [role="button"]:focus 2214 2214 - ) 2215 2215 - input:not([type="checkbox"], [type="radio"]), 2216 2216 - .pico 2217 2217 - [role="group"]:has( 2218 2218 - button:focus, 2219 2219 - [type="submit"]:focus, 2220 2220 - [type="button"]:focus, 2221 2221 - [role="button"]:focus 2222 2222 - ) 2223 2223 - select { 1941 1941 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1942 1942 + .pico [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 1943 1943 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1944 1944 + .pico [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2224 1945 border-color: transparent; 2225 1946 } 2226 2226 - .pico 2227 2227 - [role="search"]:has( 2228 2228 - input:not([type="submit"], [type="button"]):focus, 2229 2229 - select:focus 2230 2230 - ), 2231 2231 - .pico 2232 2232 - [role="group"]:has( 2233 2233 - input:not([type="submit"], [type="button"]):focus, 2234 2234 - select:focus 2235 2235 - ) { 1947 1947 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 1948 1948 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2236 1949 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2237 1950 } 2238 2238 - .pico 2239 2239 - [role="search"]:has( 2240 2240 - input:not([type="submit"], [type="button"]):focus, 2241 2241 - select:focus 2242 2242 - ) 2243 2243 - button, 2244 2244 - .pico 2245 2245 - [role="search"]:has( 2246 2246 - input:not([type="submit"], [type="button"]):focus, 2247 2247 - select:focus 2248 2248 - ) 2249 2249 - [type="submit"], 2250 2250 - .pico 2251 2251 - [role="search"]:has( 2252 2252 - input:not([type="submit"], [type="button"]):focus, 2253 2253 - select:focus 2254 2254 - ) 2255 2255 - [type="button"], 2256 2256 - .pico 2257 2257 - [role="search"]:has( 2258 2258 - input:not([type="submit"], [type="button"]):focus, 2259 2259 - select:focus 2260 2260 - ) 2261 2261 - [role="button"], 2262 2262 - .pico 2263 2263 - [role="group"]:has( 2264 2264 - input:not([type="submit"], [type="button"]):focus, 2265 2265 - select:focus 2266 2266 - ) 2267 2267 - button, 2268 2268 - .pico 2269 2269 - [role="group"]:has( 2270 2270 - input:not([type="submit"], [type="button"]):focus, 2271 2271 - select:focus 2272 2272 - ) 2273 2273 - [type="submit"], 2274 2274 - .pico 2275 2275 - [role="group"]:has( 2276 2276 - input:not([type="submit"], [type="button"]):focus, 2277 2277 - select:focus 2278 2278 - ) 2279 2279 - [type="button"], 2280 2280 - .pico 2281 2281 - [role="group"]:has( 2282 2282 - input:not([type="submit"], [type="button"]):focus, 2283 2283 - select:focus 2284 2284 - ) 2285 2285 - [role="button"] { 2286 2286 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2287 2287 - var(--pico-primary-border); 2288 2288 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2289 2289 - var(--pico-primary-hover-border); 1951 1951 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1952 1952 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1953 1953 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1954 1954 + .pico [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 1955 1955 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1956 1956 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1957 1957 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1958 1958 + .pico [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 1959 1959 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 1960 1960 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2290 1961 } 2291 1962 .pico [role="search"] button:focus, 2292 1963 .pico [role="search"] [type="submit"]:focus, ··· 2327 1998 content: ""; 2328 1999 vertical-align: -0.125em; 2329 2000 } 2330 2330 - .pico 2331 2331 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2332 2332 - :empty 2333 2333 - )::before { 2001 2001 + .pico [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2334 2002 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2335 2003 } 2336 2004 .pico [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2427 2095 opacity: 0.5; 2428 2096 transition: opacity var(--pico-transition); 2429 2097 } 2430 2430 - .pico 2431 2431 - dialog 2432 2432 - > article 2433 2433 - :is(a, button)[rel="prev"]:is( 2434 2434 - [aria-current]:not([aria-current="false"]), 2435 2435 - :hover, 2436 2436 - :active, 2437 2437 - :focus 2438 2438 - ) { 2098 2098 + .pico dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2439 2099 opacity: 1; 2440 2100 } 2441 2101 .pico dialog:not([open]), ··· 2478 2138 .pico nav li { 2479 2139 display: inline-block; 2480 2140 margin: 0; 2481 2481 - padding: var(--pico-nav-element-spacing-vertical) 2482 2482 - var(--pico-nav-element-spacing-horizontal); 2141 2141 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2483 2142 } 2484 2143 .pico nav li :where(a, [role="link"]) { 2485 2144 display: inline-block; 2486 2486 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2487 2487 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2488 2488 - padding: var(--pico-nav-link-spacing-vertical) 2489 2489 - var(--pico-nav-link-spacing-horizontal); 2145 2145 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2146 2146 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2490 2147 border-radius: var(--pico-border-radius); 2491 2148 } 2492 2149 .pico nav li :where(a, [role="link"]):not(:hover) { ··· 2495 2152 .pico nav li button, 2496 2153 .pico nav li [role="button"], 2497 2154 .pico nav li [type="button"], 2498 2498 - .pico 2499 2499 - nav 2500 2500 - li 2501 2501 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2155 2155 + .pico nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2502 2156 .pico nav li select { 2503 2157 height: auto; 2504 2158 margin-right: inherit; 2505 2159 margin-bottom: 0; 2506 2160 margin-left: inherit; 2507 2507 - padding: calc( 2508 2508 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2509 2509 - ) 2510 2510 - var(--pico-nav-link-spacing-horizontal); 2161 2161 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2511 2162 } 2512 2163 .pico nav[aria-label="breadcrumb"] { 2513 2164 align-items: center; ··· 2545 2196 display: block; 2546 2197 } 2547 2198 .pico aside li { 2548 2548 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 2549 2549 - var(--pico-nav-element-spacing-horizontal); 2199 2199 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 2550 2200 } 2551 2201 .pico aside li a { 2552 2202 display: block; ··· 2595 2245 } 2596 2246 @media (prefers-reduced-motion: no-preference) { 2597 2247 .pico progress:indeterminate { 2598 2598 - background: var(--pico-progress-background-color) 2599 2599 - linear-gradient( 2600 2600 - to right, 2601 2601 - var(--pico-progress-color) 30%, 2602 2602 - var(--pico-progress-background-color) 30% 2603 2603 - ) 2248 2248 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 2604 2249 top left/150% 150% no-repeat; 2605 2250 animation: progress-indeterminate 1s linear infinite; 2606 2251 }

+152 -449

public/css/pico.fluid.classless.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 31 28 --pico-form-element-spacing-vertical: 0.75rem; 32 29 --pico-form-element-spacing-horizontal: 1rem; 33 30 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 34 34 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 35 35 - var(--pico-primary-focus); 36 36 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 37 37 - var(--pico-form-element-border-color); 31 31 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 32 32 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 38 33 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 39 34 --pico-nav-element-spacing-vertical: 1rem; 40 35 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 153 148 --pico-font-weight: bolder; 154 149 } 155 150 156 156 - input:not( 157 157 - [type="submit"], 158 158 - [type="button"], 159 159 - [type="reset"], 160 160 - [type="checkbox"], 161 161 - [type="radio"], 162 162 - [type="file"] 163 163 - ), 151 151 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 164 152 :where(select, textarea) { 165 153 --pico-outline-width: 0.0625rem; 166 154 } ··· 197 185 filter: brightness(0) invert(1); 198 186 } 199 187 200 200 - [aria-busy="true"]:not(input, select, textarea):is( 201 201 - button, 202 202 - [type="submit"], 203 203 - [type="button"], 204 204 - [type="reset"], 205 205 - [role="button"] 206 206 - )::before { 188 188 + [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])::before { 207 189 filter: brightness(0) invert(1); 208 190 } 209 191 ··· 249 231 --pico-contrast-hover-underline: var(--pico-secondary-hover); 250 232 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 251 233 --pico-contrast-inverse: #fff; 252 252 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 253 253 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 254 254 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 255 255 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 256 256 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 257 257 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 258 258 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 234 234 + --pico-box-shadow: 235 235 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 236 236 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 237 237 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 259 238 --pico-h1-color: #2d3138; 260 239 --pico-h2-color: #373c44; 261 240 --pico-h3-color: #424751; ··· 287 266 --pico-form-element-disabled-opacity: 0.5; 288 267 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 289 268 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 290 290 - --pico-form-element-invalid-focus-color: var( 291 291 - --pico-form-element-invalid-active-border-color 292 292 - ); 269 269 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 293 270 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 294 271 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 295 295 - --pico-form-element-valid-focus-color: var( 296 296 - --pico-form-element-valid-active-border-color 297 297 - ); 272 272 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 298 273 --pico-switch-background-color: #bfc7d9; 299 274 --pico-switch-checked-background-color: var(--pico-primary-background); 300 275 --pico-switch-color: #fff; ··· 321 296 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 322 297 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 323 298 } 324 324 - [data-theme="light"] 325 325 - input:is( 326 326 - [type="submit"], 327 327 - [type="button"], 328 328 - [type="reset"], 329 329 - [type="checkbox"], 330 330 - [type="radio"], 331 331 - [type="file"] 332 332 - ), 333 333 - :root:not([data-theme="dark"]) 334 334 - input:is( 335 335 - [type="submit"], 336 336 - [type="button"], 337 337 - [type="reset"], 338 338 - [type="checkbox"], 339 339 - [type="radio"], 340 340 - [type="file"] 341 341 - ), 342 342 - :host(:not([data-theme="dark"])) 343 343 - input:is( 344 344 - [type="submit"], 345 345 - [type="button"], 346 346 - [type="reset"], 347 347 - [type="checkbox"], 348 348 - [type="radio"], 349 349 - [type="file"] 350 350 - ) { 299 299 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 300 300 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 301 301 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 351 302 --pico-form-element-focus-color: var(--pico-primary-focus); 352 303 } 353 304 ··· 390 341 --pico-contrast-hover-underline: var(--pico-contrast-hover); 391 342 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 392 343 --pico-contrast-inverse: #000; 393 393 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 394 394 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 395 395 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 396 396 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 397 397 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 398 398 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 344 344 + --pico-box-shadow: 345 345 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 346 346 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 347 347 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 399 348 --pico-h1-color: #f0f1f3; 400 349 --pico-h2-color: #e0e3e7; 401 350 --pico-h3-color: #c2c7d0; ··· 427 376 --pico-form-element-disabled-opacity: 0.5; 428 377 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 429 378 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 430 430 - --pico-form-element-invalid-focus-color: var( 431 431 - --pico-form-element-invalid-active-border-color 432 432 - ); 379 379 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 433 380 --pico-form-element-valid-border-color: #2a7b6f; 434 381 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 435 435 - --pico-form-element-valid-focus-color: var( 436 436 - --pico-form-element-valid-active-border-color 437 437 - ); 382 382 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 438 383 --pico-switch-background-color: #333c4e; 439 384 --pico-switch-checked-background-color: var(--pico-primary-background); 440 385 --pico-switch-color: #fff; ··· 461 406 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 462 407 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 463 408 } 464 464 - :root:not([data-theme]) 465 465 - input:is( 466 466 - [type="submit"], 467 467 - [type="button"], 468 468 - [type="reset"], 469 469 - [type="checkbox"], 470 470 - [type="radio"], 471 471 - [type="file"] 472 472 - ), 473 473 - :host(:not([data-theme])) 474 474 - input:is( 475 475 - [type="submit"], 476 476 - [type="button"], 477 477 - [type="reset"], 478 478 - [type="checkbox"], 479 479 - [type="radio"], 480 480 - [type="file"] 481 481 - ) { 409 409 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 410 410 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 482 411 --pico-form-element-focus-color: var(--pico-primary-focus); 483 412 } 484 413 } ··· 519 448 --pico-contrast-hover-underline: var(--pico-contrast-hover); 520 449 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 521 450 --pico-contrast-inverse: #000; 522 522 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 523 523 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 524 524 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 525 525 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 526 526 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 527 527 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 451 451 + --pico-box-shadow: 452 452 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 453 453 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 454 454 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 528 455 --pico-h1-color: #f0f1f3; 529 456 --pico-h2-color: #e0e3e7; 530 457 --pico-h3-color: #c2c7d0; ··· 556 483 --pico-form-element-disabled-opacity: 0.5; 557 484 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 558 485 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 559 559 - --pico-form-element-invalid-focus-color: var( 560 560 - --pico-form-element-invalid-active-border-color 561 561 - ); 486 486 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 562 487 --pico-form-element-valid-border-color: #2a7b6f; 563 488 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 564 564 - --pico-form-element-valid-focus-color: var( 565 565 - --pico-form-element-valid-active-border-color 566 566 - ); 489 489 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 567 490 --pico-switch-background-color: #333c4e; 568 491 --pico-switch-checked-background-color: var(--pico-primary-background); 569 492 --pico-switch-color: #fff; ··· 590 513 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 591 514 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 592 515 } 593 593 - [data-theme="dark"] 594 594 - input:is( 595 595 - [type="submit"], 596 596 - [type="button"], 597 597 - [type="reset"], 598 598 - [type="checkbox"], 599 599 - [type="radio"], 600 600 - [type="file"] 601 601 - ) { 516 516 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 602 517 --pico-form-element-focus-color: var(--pico-primary-focus); 603 518 } 604 519 ··· 752 667 --pico-color: var(--pico-h6-color); 753 668 } 754 669 755 755 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 756 756 - ~ :is(h1, h2, h3, h4, h5, h6) { 670 670 + :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 757 671 margin-top: var(--pico-typography-spacing-top); 758 672 } 759 673 ··· 846 760 text-decoration: var(--pico-text-decoration); 847 761 text-decoration-color: var(--pico-underline); 848 762 text-underline-offset: 0.125em; 849 849 - transition: background-color var(--pico-transition), 850 850 - color var(--pico-transition), box-shadow var(--pico-transition), 763 763 + transition: 764 764 + background-color var(--pico-transition), 765 765 + color var(--pico-transition), 766 766 + box-shadow var(--pico-transition), 851 767 -webkit-text-decoration var(--pico-transition); 852 852 - transition: background-color var(--pico-transition), 853 853 - color var(--pico-transition), text-decoration var(--pico-transition), 768 768 + transition: 769 769 + background-color var(--pico-transition), 770 770 + color var(--pico-transition), 771 771 + text-decoration var(--pico-transition), 854 772 box-shadow var(--pico-transition); 855 855 - transition: background-color var(--pico-transition), 856 856 - color var(--pico-transition), text-decoration var(--pico-transition), 773 773 + transition: 774 774 + background-color var(--pico-transition), 775 775 + color var(--pico-transition), 776 776 + text-decoration var(--pico-transition), 857 777 box-shadow var(--pico-transition), 858 778 -webkit-text-decoration var(--pico-transition); 859 779 } 860 860 - :where(a:not([role="button"])):is( 861 861 - [aria-current]:not([aria-current="false"]), 862 862 - :hover, 863 863 - :active, 864 864 - :focus 865 865 - ), 866 866 - [role="link"]:is( 867 867 - [aria-current]:not([aria-current="false"]), 868 868 - :hover, 869 869 - :active, 870 870 - :focus 871 871 - ) { 780 780 + :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 781 781 + [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 872 782 --pico-color: var(--pico-primary-hover); 873 783 --pico-underline: var(--pico-primary-hover-underline); 874 784 --pico-text-decoration: underline; ··· 909 819 --pico-border-color: var(--pico-primary-border); 910 820 --pico-color: var(--pico-primary-inverse); 911 821 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 912 912 - padding: var(--pico-form-element-spacing-vertical) 913 913 - var(--pico-form-element-spacing-horizontal); 822 822 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 914 823 border: var(--pico-border-width) solid var(--pico-border-color); 915 824 border-radius: var(--pico-border-radius); 916 825 outline: none; ··· 926 835 -webkit-user-select: none; 927 836 -moz-user-select: none; 928 837 user-select: none; 929 929 - transition: background-color var(--pico-transition), 930 930 - border-color var(--pico-transition), color var(--pico-transition), 838 838 + transition: 839 839 + background-color var(--pico-transition), 840 840 + border-color var(--pico-transition), 841 841 + color var(--pico-transition), 931 842 box-shadow var(--pico-transition); 932 843 } 933 844 button:is([aria-current]:not([aria-current="false"])), ··· 938 849 [type="reset"]:is(:hover, :active, :focus), 939 850 [type="button"]:is([aria-current]:not([aria-current="false"])), 940 851 [type="button"]:is(:hover, :active, :focus), 941 941 - [type="file"]::file-selector-button:is( 942 942 - [aria-current]:not([aria-current="false"]) 943 943 - ), 852 852 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 944 853 [type="file"]::file-selector-button:is(:hover, :active, :focus), 945 854 [role="button"]:is([aria-current]:not([aria-current="false"])), 946 855 [role="button"]:is(:hover, :active, :focus) { ··· 958 867 [type="button"]:focus, 959 868 [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 960 869 [type="file"]::file-selector-button:focus, 961 961 - [type="file"]::file-selector-button:is( 962 962 - [aria-current]:not([aria-current="false"]) 963 963 - ):focus, 870 870 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 964 871 [role="button"]:focus, 965 872 [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 966 966 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 967 967 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 873 873 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 968 874 } 969 875 970 876 [type="submit"], ··· 980 886 --pico-color: var(--pico-secondary-inverse); 981 887 cursor: pointer; 982 888 } 983 983 - [type="reset"]:is( 984 984 - [aria-current]:not([aria-current="false"]), 985 985 - :hover, 986 986 - :active, 987 987 - :focus 988 988 - ), 989 989 - [type="file"]::file-selector-button:is( 990 990 - [aria-current]:not([aria-current="false"]), 991 991 - :hover, 992 992 - :active, 993 993 - :focus 994 994 - ) { 889 889 + [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 890 890 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 995 891 --pico-background-color: var(--pico-secondary-hover-background); 996 892 --pico-border-color: var(--pico-secondary-hover-border); 997 893 --pico-color: var(--pico-secondary-inverse); 998 894 } 999 895 [type="reset"]:focus, 1000 896 [type="file"]::file-selector-button:focus { 1001 1001 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1002 1002 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 897 897 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1003 898 } 1004 899 1005 1005 - :where( 1006 1006 - button, 1007 1007 - [type="submit"], 1008 1008 - [type="reset"], 1009 1009 - [type="button"], 1010 1010 - [role="button"] 1011 1011 - )[disabled], 1012 1012 - :where(fieldset[disabled]) 1013 1013 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 900 900 + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 901 901 + :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1014 902 opacity: 0.5; 1015 903 pointer-events: none; 1016 904 } ··· 1256 1144 } 1257 1145 1258 1146 input:not([type="checkbox"], [type="radio"], [type="range"]) { 1259 1259 - height: calc( 1260 1260 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1261 1261 - var(--pico-border-width) * 2 1262 1262 - ); 1147 1147 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1263 1148 } 1264 1149 1265 1150 fieldset { ··· 1295 1180 -webkit-appearance: none; 1296 1181 -moz-appearance: none; 1297 1182 appearance: none; 1298 1298 - padding: var(--pico-form-element-spacing-vertical) 1299 1299 - var(--pico-form-element-spacing-horizontal); 1183 1183 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1300 1184 } 1301 1185 1302 1186 input, ··· 1313 1197 box-shadow: var(--pico-box-shadow); 1314 1198 color: var(--pico-color); 1315 1199 font-weight: var(--pico-font-weight); 1316 1316 - transition: background-color var(--pico-transition), 1317 1317 - border-color var(--pico-transition), color var(--pico-transition), 1200 1200 + transition: 1201 1201 + background-color var(--pico-transition), 1202 1202 + border-color var(--pico-transition), 1203 1203 + color var(--pico-transition), 1318 1204 box-shadow var(--pico-transition); 1319 1205 } 1320 1206 1321 1321 - input:not( 1322 1322 - [type="submit"], 1323 1323 - [type="button"], 1324 1324 - [type="reset"], 1325 1325 - [type="checkbox"], 1326 1326 - [type="radio"], 1327 1327 - [readonly] 1328 1328 - ):is(:active, :focus), 1207 1207 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1329 1208 :where(select, textarea):not([readonly]):is(:active, :focus) { 1330 1209 --pico-background-color: var(--pico-form-element-active-background-color); 1331 1210 } 1332 1211 1333 1333 - input:not( 1334 1334 - [type="submit"], 1335 1335 - [type="button"], 1336 1336 - [type="reset"], 1337 1337 - [role="switch"], 1338 1338 - [readonly] 1339 1339 - ):is(:active, :focus), 1212 1212 + input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1340 1213 :where(select, textarea):not([readonly]):is(:active, :focus) { 1341 1214 --pico-border-color: var(--pico-form-element-active-border-color); 1342 1215 } 1343 1216 1344 1344 - input:not( 1345 1345 - [type="submit"], 1346 1346 - [type="button"], 1347 1347 - [type="reset"], 1348 1348 - [type="range"], 1349 1349 - [type="file"], 1350 1350 - [readonly] 1351 1351 - ):focus, 1217 1217 + input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1352 1218 :where(select, textarea):not([readonly]):focus { 1353 1353 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1354 1354 - var(--pico-form-element-focus-color); 1219 1219 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1355 1220 } 1356 1221 1357 1222 input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1358 1223 select[disabled], 1359 1224 textarea[disabled], 1360 1225 label[aria-disabled="true"], 1361 1361 - :where(fieldset[disabled]) 1362 1362 - :is( 1363 1363 - input:not([type="submit"], [type="button"], [type="reset"]), 1364 1364 - select, 1365 1365 - textarea 1366 1366 - ) { 1226 1226 + :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1367 1227 opacity: var(--pico-form-element-disabled-opacity); 1368 1228 pointer-events: none; 1369 1229 } ··· 1382 1242 [type="week"], 1383 1243 [type="range"] 1384 1244 )[aria-invalid] { 1385 1385 - padding-right: calc( 1386 1386 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1387 1387 - ) !important; 1245 1245 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1388 1246 padding-left: var(--pico-form-element-spacing-horizontal); 1389 1247 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1390 1390 - padding-inline-end: calc( 1391 1391 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1392 1392 - ) !important; 1248 1248 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1393 1249 background-position: center right 0.75rem; 1394 1250 background-size: 1rem auto; 1395 1251 background-repeat: no-repeat; ··· 1422 1278 --pico-border-color: var(--pico-form-element-valid-border-color); 1423 1279 } 1424 1280 :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1425 1425 - --pico-border-color: var( 1426 1426 - --pico-form-element-valid-active-border-color 1427 1427 - ) !important; 1281 1281 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1428 1282 } 1429 1429 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1430 1430 - [type="checkbox"], 1431 1431 - [type="radio"] 1432 1432 - ) { 1433 1433 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1434 1434 - var(--pico-form-element-valid-focus-color) !important; 1283 1283 + :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1284 1284 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1435 1285 } 1436 1286 :where(input, select, textarea)[aria-invalid="true"] { 1437 1287 --pico-border-color: var(--pico-form-element-invalid-border-color); 1438 1288 } 1439 1289 :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1440 1440 - --pico-border-color: var( 1441 1441 - --pico-form-element-invalid-active-border-color 1442 1442 - ) !important; 1290 1290 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1443 1291 } 1444 1444 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1445 1445 - [type="checkbox"], 1446 1446 - [type="radio"] 1447 1447 - ) { 1448 1448 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1449 1449 - var(--pico-form-element-invalid-focus-color) !important; 1292 1292 + :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1293 1293 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1450 1294 } 1451 1295 1452 1452 - [dir="rtl"] 1453 1453 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1454 1454 - [aria-invalid], 1455 1455 - [aria-invalid="true"], 1456 1456 - [aria-invalid="false"] 1457 1457 - ) { 1296 1296 + [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1458 1297 background-position: center left 0.75rem; 1459 1298 } 1460 1299 ··· 1501 1340 resize: vertical; 1502 1341 } 1503 1342 textarea[aria-invalid] { 1504 1504 - --pico-icon-height: calc( 1505 1505 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1506 1506 - var(--pico-border-width) * 2 1507 1507 - ); 1343 1343 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1508 1344 background-position: top right 0.75rem !important; 1509 1345 background-size: 1rem var(--pico-icon-height) !important; 1510 1346 } ··· 1712 1548 background-size: var(--pico-icon-width) auto; 1713 1549 background-repeat: no-repeat; 1714 1550 } 1715 1715 - input:not( 1716 1716 - [type="checkbox"], 1717 1717 - [type="radio"], 1718 1718 - [type="range"], 1719 1719 - [type="file"] 1720 1720 - )[type="time"] { 1551 1551 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 1721 1552 background-image: var(--pico-icon-time); 1722 1553 } 1723 1554 ··· 1742 1573 background-image: none !important; 1743 1574 } 1744 1575 } 1745 1745 - [dir="rtl"] 1746 1746 - :is( 1747 1747 - [type="date"], 1748 1748 - [type="datetime-local"], 1749 1749 - [type="month"], 1750 1750 - [type="time"], 1751 1751 - [type="week"] 1752 1752 - ) { 1576 1576 + [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 1753 1577 text-align: right; 1754 1578 } 1755 1579 ··· 1767 1591 } 1768 1592 [type="file"]::file-selector-button { 1769 1593 margin-right: calc(var(--pico-spacing) / 2); 1770 1770 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 1771 1771 - var(--pico-form-element-spacing-horizontal); 1594 1594 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 1772 1595 } 1773 1596 [type="file"]:is(:hover, :active, :focus)::file-selector-button { 1774 1597 --pico-background-color: var(--pico-secondary-hover-background); 1775 1598 --pico-border-color: var(--pico-secondary-hover-border); 1776 1599 } 1777 1600 [type="file"]:focus::file-selector-button { 1778 1778 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1779 1779 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1601 1601 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1780 1602 } 1781 1603 1782 1604 /** ··· 1795 1617 height: 0.375rem; 1796 1618 border-radius: var(--pico-border-radius); 1797 1619 background-color: var(--pico-range-border-color); 1798 1798 - -webkit-transition: background-color var(--pico-transition), 1620 1620 + -webkit-transition: 1621 1621 + background-color var(--pico-transition), 1799 1622 box-shadow var(--pico-transition); 1800 1800 - transition: background-color var(--pico-transition), 1623 1623 + transition: 1624 1624 + background-color var(--pico-transition), 1801 1625 box-shadow var(--pico-transition); 1802 1626 } 1803 1627 [type="range"]::-moz-range-track { ··· 1805 1629 height: 0.375rem; 1806 1630 border-radius: var(--pico-border-radius); 1807 1631 background-color: var(--pico-range-border-color); 1808 1808 - -moz-transition: background-color var(--pico-transition), 1632 1632 + -moz-transition: 1633 1633 + background-color var(--pico-transition), 1809 1634 box-shadow var(--pico-transition); 1810 1810 - transition: background-color var(--pico-transition), 1635 1635 + transition: 1636 1636 + background-color var(--pico-transition), 1811 1637 box-shadow var(--pico-transition); 1812 1638 } 1813 1639 [type="range"]::-ms-track { ··· 1815 1641 height: 0.375rem; 1816 1642 border-radius: var(--pico-border-radius); 1817 1643 background-color: var(--pico-range-border-color); 1818 1818 - -ms-transition: background-color var(--pico-transition), 1644 1644 + -ms-transition: 1645 1645 + background-color var(--pico-transition), 1819 1646 box-shadow var(--pico-transition); 1820 1820 - transition: background-color var(--pico-transition), 1647 1647 + transition: 1648 1648 + background-color var(--pico-transition), 1821 1649 box-shadow var(--pico-transition); 1822 1650 } 1823 1651 [type="range"]::-webkit-slider-thumb { ··· 1829 1657 border-radius: 50%; 1830 1658 background-color: var(--pico-range-thumb-color); 1831 1659 cursor: pointer; 1832 1832 - -webkit-transition: background-color var(--pico-transition), 1660 1660 + -webkit-transition: 1661 1661 + background-color var(--pico-transition), 1833 1662 transform var(--pico-transition); 1834 1834 - transition: background-color var(--pico-transition), 1663 1663 + transition: 1664 1664 + background-color var(--pico-transition), 1835 1665 transform var(--pico-transition); 1836 1666 } 1837 1667 [type="range"]::-moz-range-thumb { ··· 1843 1673 border-radius: 50%; 1844 1674 background-color: var(--pico-range-thumb-color); 1845 1675 cursor: pointer; 1846 1846 - -moz-transition: background-color var(--pico-transition), 1676 1676 + -moz-transition: 1677 1677 + background-color var(--pico-transition), 1847 1678 transform var(--pico-transition); 1848 1848 - transition: background-color var(--pico-transition), 1679 1679 + transition: 1680 1680 + background-color var(--pico-transition), 1849 1681 transform var(--pico-transition); 1850 1682 } 1851 1683 [type="range"]::-ms-thumb { ··· 1857 1689 border-radius: 50%; 1858 1690 background-color: var(--pico-range-thumb-color); 1859 1691 cursor: pointer; 1860 1860 - -ms-transition: background-color var(--pico-transition), 1692 1692 + -ms-transition: 1693 1693 + background-color var(--pico-transition), 1861 1694 transform var(--pico-transition); 1862 1862 - transition: background-color var(--pico-transition), 1695 1695 + transition: 1696 1696 + background-color var(--pico-transition), 1863 1697 transform var(--pico-transition); 1864 1698 } 1865 1699 [type="range"]:active, ··· 1880 1714 /** 1881 1715 * Input type search 1882 1716 */ 1883 1883 - input:not( 1884 1884 - [type="checkbox"], 1885 1885 - [type="radio"], 1886 1886 - [type="range"], 1887 1887 - [type="file"] 1888 1888 - )[type="search"] { 1889 1889 - padding-inline-start: calc( 1890 1890 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1891 1891 - ); 1717 1717 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1718 1718 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 1892 1719 background-image: var(--pico-icon-search); 1893 1893 - background-position: center left 1894 1894 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1720 1720 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1895 1721 background-size: 1rem auto; 1896 1722 background-repeat: no-repeat; 1897 1723 } 1898 1898 - input:not( 1899 1899 - [type="checkbox"], 1900 1900 - [type="radio"], 1901 1901 - [type="range"], 1902 1902 - [type="file"] 1903 1903 - )[type="search"][aria-invalid] { 1904 1904 - padding-inline-start: calc( 1905 1905 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1906 1906 - ) !important; 1907 1907 - background-position: center left 1.125rem, center right 0.75rem; 1724 1724 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1725 1725 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1726 1726 + background-position: 1727 1727 + center left 1.125rem, 1728 1728 + center right 0.75rem; 1908 1729 } 1909 1909 - input:not( 1910 1910 - [type="checkbox"], 1911 1911 - [type="radio"], 1912 1912 - [type="range"], 1913 1913 - [type="file"] 1914 1914 - )[type="search"][aria-invalid="false"] { 1730 1730 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 1915 1731 background-image: var(--pico-icon-search), var(--pico-icon-valid); 1916 1732 } 1917 1917 - input:not( 1918 1918 - [type="checkbox"], 1919 1919 - [type="radio"], 1920 1920 - [type="range"], 1921 1921 - [type="file"] 1922 1922 - )[type="search"][aria-invalid="true"] { 1733 1733 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 1923 1734 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 1924 1735 } 1925 1736 1926 1926 - [dir="rtl"] 1927 1927 - :where(input):not( 1928 1928 - [type="checkbox"], 1929 1929 - [type="radio"], 1930 1930 - [type="range"], 1931 1931 - [type="file"] 1932 1932 - )[type="search"] { 1737 1737 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1933 1738 background-position: center right 1.125rem; 1934 1739 } 1935 1935 - [dir="rtl"] 1936 1936 - :where(input):not( 1937 1937 - [type="checkbox"], 1938 1938 - [type="radio"], 1939 1939 - [type="range"], 1940 1940 - [type="file"] 1941 1941 - )[type="search"][aria-invalid] { 1942 1942 - background-position: center right 1.125rem, center left 0.75rem; 1740 1740 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1741 1741 + background-position: 1742 1742 + center right 1.125rem, 1743 1743 + center left 0.75rem; 1943 1744 } 1944 1745 1945 1746 /** ··· 2031 1832 article > footer { 2032 1833 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2033 1834 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2034 2034 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2035 2035 - var(--pico-block-spacing-horizontal); 1835 1835 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2036 1836 background-color: var(--pico-card-sectioning-background-color); 2037 1837 } 2038 1838 article > header { ··· 2130 1930 width: auto; 2131 1931 } 2132 1932 @supports selector(:has(*)) { 2133 2133 - [role="search"]:has( 2134 2134 - button:focus, 2135 2135 - [type="submit"]:focus, 2136 2136 - [type="button"]:focus, 2137 2137 - [role="button"]:focus 2138 2138 - ), 2139 2139 - [role="group"]:has( 2140 2140 - button:focus, 2141 2141 - [type="submit"]:focus, 2142 2142 - [type="button"]:focus, 2143 2143 - [role="button"]:focus 2144 2144 - ) { 1933 1933 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 1934 1934 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2145 1935 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2146 1936 } 2147 2147 - [role="search"]:has( 2148 2148 - button:focus, 2149 2149 - [type="submit"]:focus, 2150 2150 - [type="button"]:focus, 2151 2151 - [role="button"]:focus 2152 2152 - ) 2153 2153 - input:not([type="checkbox"], [type="radio"]), 2154 2154 - [role="search"]:has( 2155 2155 - button:focus, 2156 2156 - [type="submit"]:focus, 2157 2157 - [type="button"]:focus, 2158 2158 - [role="button"]:focus 2159 2159 - ) 2160 2160 - select, 2161 2161 - [role="group"]:has( 2162 2162 - button:focus, 2163 2163 - [type="submit"]:focus, 2164 2164 - [type="button"]:focus, 2165 2165 - [role="button"]:focus 2166 2166 - ) 2167 2167 - input:not([type="checkbox"], [type="radio"]), 2168 2168 - [role="group"]:has( 2169 2169 - button:focus, 2170 2170 - [type="submit"]:focus, 2171 2171 - [type="button"]:focus, 2172 2172 - [role="button"]:focus 2173 2173 - ) 2174 2174 - select { 1937 1937 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1938 1938 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 1939 1939 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1940 1940 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2175 1941 border-color: transparent; 2176 1942 } 2177 2177 - [role="search"]:has( 2178 2178 - input:not([type="submit"], [type="button"]):focus, 2179 2179 - select:focus 2180 2180 - ), 2181 2181 - [role="group"]:has( 2182 2182 - input:not([type="submit"], [type="button"]):focus, 2183 2183 - select:focus 2184 2184 - ) { 1943 1943 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 1944 1944 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2185 1945 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2186 1946 } 2187 2187 - [role="search"]:has( 2188 2188 - input:not([type="submit"], [type="button"]):focus, 2189 2189 - select:focus 2190 2190 - ) 2191 2191 - button, 2192 2192 - [role="search"]:has( 2193 2193 - input:not([type="submit"], [type="button"]):focus, 2194 2194 - select:focus 2195 2195 - ) 2196 2196 - [type="submit"], 2197 2197 - [role="search"]:has( 2198 2198 - input:not([type="submit"], [type="button"]):focus, 2199 2199 - select:focus 2200 2200 - ) 2201 2201 - [type="button"], 2202 2202 - [role="search"]:has( 2203 2203 - input:not([type="submit"], [type="button"]):focus, 2204 2204 - select:focus 2205 2205 - ) 2206 2206 - [role="button"], 2207 2207 - [role="group"]:has( 2208 2208 - input:not([type="submit"], [type="button"]):focus, 2209 2209 - select:focus 2210 2210 - ) 2211 2211 - button, 2212 2212 - [role="group"]:has( 2213 2213 - input:not([type="submit"], [type="button"]):focus, 2214 2214 - select:focus 2215 2215 - ) 2216 2216 - [type="submit"], 2217 2217 - [role="group"]:has( 2218 2218 - input:not([type="submit"], [type="button"]):focus, 2219 2219 - select:focus 2220 2220 - ) 2221 2221 - [type="button"], 2222 2222 - [role="group"]:has( 2223 2223 - input:not([type="submit"], [type="button"]):focus, 2224 2224 - select:focus 2225 2225 - ) 2226 2226 - [role="button"] { 2227 2227 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2228 2228 - var(--pico-primary-border); 2229 2229 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2230 2230 - var(--pico-primary-hover-border); 1947 1947 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1948 1948 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1949 1949 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1950 1950 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 1951 1951 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1952 1952 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1953 1953 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1954 1954 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 1955 1955 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 1956 1956 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2231 1957 } 2232 1958 [role="search"] button:focus, 2233 1959 [role="search"] [type="submit"]:focus, ··· 2268 1994 content: ""; 2269 1995 vertical-align: -0.125em; 2270 1996 } 2271 2271 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2272 2272 - :empty 2273 2273 - )::before { 1997 1997 + [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2274 1998 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2275 1999 } 2276 2000 [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2367 2091 opacity: 0.5; 2368 2092 transition: opacity var(--pico-transition); 2369 2093 } 2370 2370 - dialog 2371 2371 - > article 2372 2372 - :is(a, button)[rel="prev"]:is( 2373 2373 - [aria-current]:not([aria-current="false"]), 2374 2374 - :hover, 2375 2375 - :active, 2376 2376 - :focus 2377 2377 - ) { 2094 2094 + dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2378 2095 opacity: 1; 2379 2096 } 2380 2097 dialog:not([open]), ··· 2417 2134 nav li { 2418 2135 display: inline-block; 2419 2136 margin: 0; 2420 2420 - padding: var(--pico-nav-element-spacing-vertical) 2421 2421 - var(--pico-nav-element-spacing-horizontal); 2137 2137 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2422 2138 } 2423 2139 nav li :where(a, [role="link"]) { 2424 2140 display: inline-block; 2425 2425 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2426 2426 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2427 2427 - padding: var(--pico-nav-link-spacing-vertical) 2428 2428 - var(--pico-nav-link-spacing-horizontal); 2141 2141 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2142 2142 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2429 2143 border-radius: var(--pico-border-radius); 2430 2144 } 2431 2145 nav li :where(a, [role="link"]):not(:hover) { ··· 2434 2148 nav li button, 2435 2149 nav li [role="button"], 2436 2150 nav li [type="button"], 2437 2437 - nav 2438 2438 - li 2439 2439 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2151 2151 + nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2440 2152 nav li select { 2441 2153 height: auto; 2442 2154 margin-right: inherit; 2443 2155 margin-bottom: 0; 2444 2156 margin-left: inherit; 2445 2445 - padding: calc( 2446 2446 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2447 2447 - ) 2448 2448 - var(--pico-nav-link-spacing-horizontal); 2157 2157 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2449 2158 } 2450 2159 nav[aria-label="breadcrumb"] { 2451 2160 align-items: center; ··· 2483 2192 display: block; 2484 2193 } 2485 2194 aside li { 2486 2486 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 2487 2487 - var(--pico-nav-element-spacing-horizontal); 2195 2195 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 2488 2196 } 2489 2197 aside li a { 2490 2198 display: block; ··· 2533 2241 } 2534 2242 @media (prefers-reduced-motion: no-preference) { 2535 2243 progress:indeterminate { 2536 2536 - background: var(--pico-progress-background-color) 2537 2537 - linear-gradient( 2538 2538 - to right, 2539 2539 - var(--pico-progress-color) 30%, 2540 2540 - var(--pico-progress-background-color) 30% 2541 2541 - ) 2244 2244 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 2542 2245 top left/150% 150% no-repeat; 2543 2246 animation: progress-indeterminate 1s linear infinite; 2544 2247 }

+152 -449

public/css/pico.fluid.classless.green.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 31 28 --pico-form-element-spacing-vertical: 0.75rem; 32 29 --pico-form-element-spacing-horizontal: 1rem; 33 30 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 34 34 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 35 35 - var(--pico-primary-focus); 36 36 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 37 37 - var(--pico-form-element-border-color); 31 31 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 32 32 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 38 33 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 39 34 --pico-nav-element-spacing-vertical: 1rem; 40 35 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 153 148 --pico-font-weight: bolder; 154 149 } 155 150 156 156 - input:not( 157 157 - [type="submit"], 158 158 - [type="button"], 159 159 - [type="reset"], 160 160 - [type="checkbox"], 161 161 - [type="radio"], 162 162 - [type="file"] 163 163 - ), 151 151 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 164 152 :where(select, textarea) { 165 153 --pico-outline-width: 0.0625rem; 166 154 } ··· 197 185 filter: brightness(0) invert(1); 198 186 } 199 187 200 200 - [aria-busy="true"]:not(input, select, textarea):is( 201 201 - button, 202 202 - [type="submit"], 203 203 - [type="button"], 204 204 - [type="reset"], 205 205 - [role="button"] 206 206 - )::before { 188 188 + [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])::before { 207 189 filter: brightness(0) invert(1); 208 190 } 209 191 ··· 249 231 --pico-contrast-hover-underline: var(--pico-secondary-hover); 250 232 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 251 233 --pico-contrast-inverse: #fff; 252 252 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 253 253 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 254 254 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 255 255 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 256 256 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 257 257 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 258 258 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 234 234 + --pico-box-shadow: 235 235 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 236 236 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 237 237 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 259 238 --pico-h1-color: #2d3138; 260 239 --pico-h2-color: #373c44; 261 240 --pico-h3-color: #424751; ··· 287 266 --pico-form-element-disabled-opacity: 0.5; 288 267 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 289 268 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 290 290 - --pico-form-element-invalid-focus-color: var( 291 291 - --pico-form-element-invalid-active-border-color 292 292 - ); 269 269 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 293 270 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 294 271 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 295 295 - --pico-form-element-valid-focus-color: var( 296 296 - --pico-form-element-valid-active-border-color 297 297 - ); 272 272 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 298 273 --pico-switch-background-color: #bfc7d9; 299 274 --pico-switch-checked-background-color: var(--pico-primary-background); 300 275 --pico-switch-color: #fff; ··· 321 296 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 322 297 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 323 298 } 324 324 - [data-theme="light"] 325 325 - input:is( 326 326 - [type="submit"], 327 327 - [type="button"], 328 328 - [type="reset"], 329 329 - [type="checkbox"], 330 330 - [type="radio"], 331 331 - [type="file"] 332 332 - ), 333 333 - :root:not([data-theme="dark"]) 334 334 - input:is( 335 335 - [type="submit"], 336 336 - [type="button"], 337 337 - [type="reset"], 338 338 - [type="checkbox"], 339 339 - [type="radio"], 340 340 - [type="file"] 341 341 - ), 342 342 - :host(:not([data-theme="dark"])) 343 343 - input:is( 344 344 - [type="submit"], 345 345 - [type="button"], 346 346 - [type="reset"], 347 347 - [type="checkbox"], 348 348 - [type="radio"], 349 349 - [type="file"] 350 350 - ) { 299 299 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 300 300 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 301 301 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 351 302 --pico-form-element-focus-color: var(--pico-primary-focus); 352 303 } 353 304 ··· 390 341 --pico-contrast-hover-underline: var(--pico-contrast-hover); 391 342 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 392 343 --pico-contrast-inverse: #000; 393 393 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 394 394 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 395 395 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 396 396 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 397 397 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 398 398 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 344 344 + --pico-box-shadow: 345 345 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 346 346 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 347 347 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 399 348 --pico-h1-color: #f0f1f3; 400 349 --pico-h2-color: #e0e3e7; 401 350 --pico-h3-color: #c2c7d0; ··· 427 376 --pico-form-element-disabled-opacity: 0.5; 428 377 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 429 378 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 430 430 - --pico-form-element-invalid-focus-color: var( 431 431 - --pico-form-element-invalid-active-border-color 432 432 - ); 379 379 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 433 380 --pico-form-element-valid-border-color: #2a7b6f; 434 381 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 435 435 - --pico-form-element-valid-focus-color: var( 436 436 - --pico-form-element-valid-active-border-color 437 437 - ); 382 382 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 438 383 --pico-switch-background-color: #333c4e; 439 384 --pico-switch-checked-background-color: var(--pico-primary-background); 440 385 --pico-switch-color: #fff; ··· 461 406 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 462 407 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 463 408 } 464 464 - :root:not([data-theme]) 465 465 - input:is( 466 466 - [type="submit"], 467 467 - [type="button"], 468 468 - [type="reset"], 469 469 - [type="checkbox"], 470 470 - [type="radio"], 471 471 - [type="file"] 472 472 - ), 473 473 - :host(:not([data-theme])) 474 474 - input:is( 475 475 - [type="submit"], 476 476 - [type="button"], 477 477 - [type="reset"], 478 478 - [type="checkbox"], 479 479 - [type="radio"], 480 480 - [type="file"] 481 481 - ) { 409 409 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 410 410 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 482 411 --pico-form-element-focus-color: var(--pico-primary-focus); 483 412 } 484 413 } ··· 519 448 --pico-contrast-hover-underline: var(--pico-contrast-hover); 520 449 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 521 450 --pico-contrast-inverse: #000; 522 522 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 523 523 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 524 524 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 525 525 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 526 526 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 527 527 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 451 451 + --pico-box-shadow: 452 452 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 453 453 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 454 454 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 528 455 --pico-h1-color: #f0f1f3; 529 456 --pico-h2-color: #e0e3e7; 530 457 --pico-h3-color: #c2c7d0; ··· 556 483 --pico-form-element-disabled-opacity: 0.5; 557 484 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 558 485 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 559 559 - --pico-form-element-invalid-focus-color: var( 560 560 - --pico-form-element-invalid-active-border-color 561 561 - ); 486 486 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 562 487 --pico-form-element-valid-border-color: #2a7b6f; 563 488 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 564 564 - --pico-form-element-valid-focus-color: var( 565 565 - --pico-form-element-valid-active-border-color 566 566 - ); 489 489 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 567 490 --pico-switch-background-color: #333c4e; 568 491 --pico-switch-checked-background-color: var(--pico-primary-background); 569 492 --pico-switch-color: #fff; ··· 590 513 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 591 514 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 592 515 } 593 593 - [data-theme="dark"] 594 594 - input:is( 595 595 - [type="submit"], 596 596 - [type="button"], 597 597 - [type="reset"], 598 598 - [type="checkbox"], 599 599 - [type="radio"], 600 600 - [type="file"] 601 601 - ) { 516 516 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 602 517 --pico-form-element-focus-color: var(--pico-primary-focus); 603 518 } 604 519 ··· 752 667 --pico-color: var(--pico-h6-color); 753 668 } 754 669 755 755 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 756 756 - ~ :is(h1, h2, h3, h4, h5, h6) { 670 670 + :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 757 671 margin-top: var(--pico-typography-spacing-top); 758 672 } 759 673 ··· 846 760 text-decoration: var(--pico-text-decoration); 847 761 text-decoration-color: var(--pico-underline); 848 762 text-underline-offset: 0.125em; 849 849 - transition: background-color var(--pico-transition), 850 850 - color var(--pico-transition), box-shadow var(--pico-transition), 763 763 + transition: 764 764 + background-color var(--pico-transition), 765 765 + color var(--pico-transition), 766 766 + box-shadow var(--pico-transition), 851 767 -webkit-text-decoration var(--pico-transition); 852 852 - transition: background-color var(--pico-transition), 853 853 - color var(--pico-transition), text-decoration var(--pico-transition), 768 768 + transition: 769 769 + background-color var(--pico-transition), 770 770 + color var(--pico-transition), 771 771 + text-decoration var(--pico-transition), 854 772 box-shadow var(--pico-transition); 855 855 - transition: background-color var(--pico-transition), 856 856 - color var(--pico-transition), text-decoration var(--pico-transition), 773 773 + transition: 774 774 + background-color var(--pico-transition), 775 775 + color var(--pico-transition), 776 776 + text-decoration var(--pico-transition), 857 777 box-shadow var(--pico-transition), 858 778 -webkit-text-decoration var(--pico-transition); 859 779 } 860 860 - :where(a:not([role="button"])):is( 861 861 - [aria-current]:not([aria-current="false"]), 862 862 - :hover, 863 863 - :active, 864 864 - :focus 865 865 - ), 866 866 - [role="link"]:is( 867 867 - [aria-current]:not([aria-current="false"]), 868 868 - :hover, 869 869 - :active, 870 870 - :focus 871 871 - ) { 780 780 + :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 781 781 + [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 872 782 --pico-color: var(--pico-primary-hover); 873 783 --pico-underline: var(--pico-primary-hover-underline); 874 784 --pico-text-decoration: underline; ··· 909 819 --pico-border-color: var(--pico-primary-border); 910 820 --pico-color: var(--pico-primary-inverse); 911 821 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 912 912 - padding: var(--pico-form-element-spacing-vertical) 913 913 - var(--pico-form-element-spacing-horizontal); 822 822 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 914 823 border: var(--pico-border-width) solid var(--pico-border-color); 915 824 border-radius: var(--pico-border-radius); 916 825 outline: none; ··· 926 835 -webkit-user-select: none; 927 836 -moz-user-select: none; 928 837 user-select: none; 929 929 - transition: background-color var(--pico-transition), 930 930 - border-color var(--pico-transition), color var(--pico-transition), 838 838 + transition: 839 839 + background-color var(--pico-transition), 840 840 + border-color var(--pico-transition), 841 841 + color var(--pico-transition), 931 842 box-shadow var(--pico-transition); 932 843 } 933 844 button:is([aria-current]:not([aria-current="false"])), ··· 938 849 [type="reset"]:is(:hover, :active, :focus), 939 850 [type="button"]:is([aria-current]:not([aria-current="false"])), 940 851 [type="button"]:is(:hover, :active, :focus), 941 941 - [type="file"]::file-selector-button:is( 942 942 - [aria-current]:not([aria-current="false"]) 943 943 - ), 852 852 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 944 853 [type="file"]::file-selector-button:is(:hover, :active, :focus), 945 854 [role="button"]:is([aria-current]:not([aria-current="false"])), 946 855 [role="button"]:is(:hover, :active, :focus) { ··· 958 867 [type="button"]:focus, 959 868 [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 960 869 [type="file"]::file-selector-button:focus, 961 961 - [type="file"]::file-selector-button:is( 962 962 - [aria-current]:not([aria-current="false"]) 963 963 - ):focus, 870 870 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 964 871 [role="button"]:focus, 965 872 [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 966 966 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 967 967 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 873 873 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 968 874 } 969 875 970 876 [type="submit"], ··· 980 886 --pico-color: var(--pico-secondary-inverse); 981 887 cursor: pointer; 982 888 } 983 983 - [type="reset"]:is( 984 984 - [aria-current]:not([aria-current="false"]), 985 985 - :hover, 986 986 - :active, 987 987 - :focus 988 988 - ), 989 989 - [type="file"]::file-selector-button:is( 990 990 - [aria-current]:not([aria-current="false"]), 991 991 - :hover, 992 992 - :active, 993 993 - :focus 994 994 - ) { 889 889 + [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 890 890 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 995 891 --pico-background-color: var(--pico-secondary-hover-background); 996 892 --pico-border-color: var(--pico-secondary-hover-border); 997 893 --pico-color: var(--pico-secondary-inverse); 998 894 } 999 895 [type="reset"]:focus, 1000 896 [type="file"]::file-selector-button:focus { 1001 1001 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1002 1002 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 897 897 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1003 898 } 1004 899 1005 1005 - :where( 1006 1006 - button, 1007 1007 - [type="submit"], 1008 1008 - [type="reset"], 1009 1009 - [type="button"], 1010 1010 - [role="button"] 1011 1011 - )[disabled], 1012 1012 - :where(fieldset[disabled]) 1013 1013 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 900 900 + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 901 901 + :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1014 902 opacity: 0.5; 1015 903 pointer-events: none; 1016 904 } ··· 1256 1144 } 1257 1145 1258 1146 input:not([type="checkbox"], [type="radio"], [type="range"]) { 1259 1259 - height: calc( 1260 1260 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1261 1261 - var(--pico-border-width) * 2 1262 1262 - ); 1147 1147 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1263 1148 } 1264 1149 1265 1150 fieldset { ··· 1295 1180 -webkit-appearance: none; 1296 1181 -moz-appearance: none; 1297 1182 appearance: none; 1298 1298 - padding: var(--pico-form-element-spacing-vertical) 1299 1299 - var(--pico-form-element-spacing-horizontal); 1183 1183 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1300 1184 } 1301 1185 1302 1186 input, ··· 1313 1197 box-shadow: var(--pico-box-shadow); 1314 1198 color: var(--pico-color); 1315 1199 font-weight: var(--pico-font-weight); 1316 1316 - transition: background-color var(--pico-transition), 1317 1317 - border-color var(--pico-transition), color var(--pico-transition), 1200 1200 + transition: 1201 1201 + background-color var(--pico-transition), 1202 1202 + border-color var(--pico-transition), 1203 1203 + color var(--pico-transition), 1318 1204 box-shadow var(--pico-transition); 1319 1205 } 1320 1206 1321 1321 - input:not( 1322 1322 - [type="submit"], 1323 1323 - [type="button"], 1324 1324 - [type="reset"], 1325 1325 - [type="checkbox"], 1326 1326 - [type="radio"], 1327 1327 - [readonly] 1328 1328 - ):is(:active, :focus), 1207 1207 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1329 1208 :where(select, textarea):not([readonly]):is(:active, :focus) { 1330 1209 --pico-background-color: var(--pico-form-element-active-background-color); 1331 1210 } 1332 1211 1333 1333 - input:not( 1334 1334 - [type="submit"], 1335 1335 - [type="button"], 1336 1336 - [type="reset"], 1337 1337 - [role="switch"], 1338 1338 - [readonly] 1339 1339 - ):is(:active, :focus), 1212 1212 + input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1340 1213 :where(select, textarea):not([readonly]):is(:active, :focus) { 1341 1214 --pico-border-color: var(--pico-form-element-active-border-color); 1342 1215 } 1343 1216 1344 1344 - input:not( 1345 1345 - [type="submit"], 1346 1346 - [type="button"], 1347 1347 - [type="reset"], 1348 1348 - [type="range"], 1349 1349 - [type="file"], 1350 1350 - [readonly] 1351 1351 - ):focus, 1217 1217 + input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1352 1218 :where(select, textarea):not([readonly]):focus { 1353 1353 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1354 1354 - var(--pico-form-element-focus-color); 1219 1219 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1355 1220 } 1356 1221 1357 1222 input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1358 1223 select[disabled], 1359 1224 textarea[disabled], 1360 1225 label[aria-disabled="true"], 1361 1361 - :where(fieldset[disabled]) 1362 1362 - :is( 1363 1363 - input:not([type="submit"], [type="button"], [type="reset"]), 1364 1364 - select, 1365 1365 - textarea 1366 1366 - ) { 1226 1226 + :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1367 1227 opacity: var(--pico-form-element-disabled-opacity); 1368 1228 pointer-events: none; 1369 1229 } ··· 1382 1242 [type="week"], 1383 1243 [type="range"] 1384 1244 )[aria-invalid] { 1385 1385 - padding-right: calc( 1386 1386 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1387 1387 - ) !important; 1245 1245 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1388 1246 padding-left: var(--pico-form-element-spacing-horizontal); 1389 1247 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1390 1390 - padding-inline-end: calc( 1391 1391 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1392 1392 - ) !important; 1248 1248 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1393 1249 background-position: center right 0.75rem; 1394 1250 background-size: 1rem auto; 1395 1251 background-repeat: no-repeat; ··· 1422 1278 --pico-border-color: var(--pico-form-element-valid-border-color); 1423 1279 } 1424 1280 :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1425 1425 - --pico-border-color: var( 1426 1426 - --pico-form-element-valid-active-border-color 1427 1427 - ) !important; 1281 1281 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1428 1282 } 1429 1429 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1430 1430 - [type="checkbox"], 1431 1431 - [type="radio"] 1432 1432 - ) { 1433 1433 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1434 1434 - var(--pico-form-element-valid-focus-color) !important; 1283 1283 + :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1284 1284 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1435 1285 } 1436 1286 :where(input, select, textarea)[aria-invalid="true"] { 1437 1287 --pico-border-color: var(--pico-form-element-invalid-border-color); 1438 1288 } 1439 1289 :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1440 1440 - --pico-border-color: var( 1441 1441 - --pico-form-element-invalid-active-border-color 1442 1442 - ) !important; 1290 1290 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1443 1291 } 1444 1444 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1445 1445 - [type="checkbox"], 1446 1446 - [type="radio"] 1447 1447 - ) { 1448 1448 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1449 1449 - var(--pico-form-element-invalid-focus-color) !important; 1292 1292 + :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1293 1293 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1450 1294 } 1451 1295 1452 1452 - [dir="rtl"] 1453 1453 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1454 1454 - [aria-invalid], 1455 1455 - [aria-invalid="true"], 1456 1456 - [aria-invalid="false"] 1457 1457 - ) { 1296 1296 + [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1458 1297 background-position: center left 0.75rem; 1459 1298 } 1460 1299 ··· 1501 1340 resize: vertical; 1502 1341 } 1503 1342 textarea[aria-invalid] { 1504 1504 - --pico-icon-height: calc( 1505 1505 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1506 1506 - var(--pico-border-width) * 2 1507 1507 - ); 1343 1343 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1508 1344 background-position: top right 0.75rem !important; 1509 1345 background-size: 1rem var(--pico-icon-height) !important; 1510 1346 } ··· 1712 1548 background-size: var(--pico-icon-width) auto; 1713 1549 background-repeat: no-repeat; 1714 1550 } 1715 1715 - input:not( 1716 1716 - [type="checkbox"], 1717 1717 - [type="radio"], 1718 1718 - [type="range"], 1719 1719 - [type="file"] 1720 1720 - )[type="time"] { 1551 1551 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 1721 1552 background-image: var(--pico-icon-time); 1722 1553 } 1723 1554 ··· 1742 1573 background-image: none !important; 1743 1574 } 1744 1575 } 1745 1745 - [dir="rtl"] 1746 1746 - :is( 1747 1747 - [type="date"], 1748 1748 - [type="datetime-local"], 1749 1749 - [type="month"], 1750 1750 - [type="time"], 1751 1751 - [type="week"] 1752 1752 - ) { 1576 1576 + [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 1753 1577 text-align: right; 1754 1578 } 1755 1579 ··· 1767 1591 } 1768 1592 [type="file"]::file-selector-button { 1769 1593 margin-right: calc(var(--pico-spacing) / 2); 1770 1770 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 1771 1771 - var(--pico-form-element-spacing-horizontal); 1594 1594 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 1772 1595 } 1773 1596 [type="file"]:is(:hover, :active, :focus)::file-selector-button { 1774 1597 --pico-background-color: var(--pico-secondary-hover-background); 1775 1598 --pico-border-color: var(--pico-secondary-hover-border); 1776 1599 } 1777 1600 [type="file"]:focus::file-selector-button { 1778 1778 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1779 1779 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1601 1601 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1780 1602 } 1781 1603 1782 1604 /** ··· 1795 1617 height: 0.375rem; 1796 1618 border-radius: var(--pico-border-radius); 1797 1619 background-color: var(--pico-range-border-color); 1798 1798 - -webkit-transition: background-color var(--pico-transition), 1620 1620 + -webkit-transition: 1621 1621 + background-color var(--pico-transition), 1799 1622 box-shadow var(--pico-transition); 1800 1800 - transition: background-color var(--pico-transition), 1623 1623 + transition: 1624 1624 + background-color var(--pico-transition), 1801 1625 box-shadow var(--pico-transition); 1802 1626 } 1803 1627 [type="range"]::-moz-range-track { ··· 1805 1629 height: 0.375rem; 1806 1630 border-radius: var(--pico-border-radius); 1807 1631 background-color: var(--pico-range-border-color); 1808 1808 - -moz-transition: background-color var(--pico-transition), 1632 1632 + -moz-transition: 1633 1633 + background-color var(--pico-transition), 1809 1634 box-shadow var(--pico-transition); 1810 1810 - transition: background-color var(--pico-transition), 1635 1635 + transition: 1636 1636 + background-color var(--pico-transition), 1811 1637 box-shadow var(--pico-transition); 1812 1638 } 1813 1639 [type="range"]::-ms-track { ··· 1815 1641 height: 0.375rem; 1816 1642 border-radius: var(--pico-border-radius); 1817 1643 background-color: var(--pico-range-border-color); 1818 1818 - -ms-transition: background-color var(--pico-transition), 1644 1644 + -ms-transition: 1645 1645 + background-color var(--pico-transition), 1819 1646 box-shadow var(--pico-transition); 1820 1820 - transition: background-color var(--pico-transition), 1647 1647 + transition: 1648 1648 + background-color var(--pico-transition), 1821 1649 box-shadow var(--pico-transition); 1822 1650 } 1823 1651 [type="range"]::-webkit-slider-thumb { ··· 1829 1657 border-radius: 50%; 1830 1658 background-color: var(--pico-range-thumb-color); 1831 1659 cursor: pointer; 1832 1832 - -webkit-transition: background-color var(--pico-transition), 1660 1660 + -webkit-transition: 1661 1661 + background-color var(--pico-transition), 1833 1662 transform var(--pico-transition); 1834 1834 - transition: background-color var(--pico-transition), 1663 1663 + transition: 1664 1664 + background-color var(--pico-transition), 1835 1665 transform var(--pico-transition); 1836 1666 } 1837 1667 [type="range"]::-moz-range-thumb { ··· 1843 1673 border-radius: 50%; 1844 1674 background-color: var(--pico-range-thumb-color); 1845 1675 cursor: pointer; 1846 1846 - -moz-transition: background-color var(--pico-transition), 1676 1676 + -moz-transition: 1677 1677 + background-color var(--pico-transition), 1847 1678 transform var(--pico-transition); 1848 1848 - transition: background-color var(--pico-transition), 1679 1679 + transition: 1680 1680 + background-color var(--pico-transition), 1849 1681 transform var(--pico-transition); 1850 1682 } 1851 1683 [type="range"]::-ms-thumb { ··· 1857 1689 border-radius: 50%; 1858 1690 background-color: var(--pico-range-thumb-color); 1859 1691 cursor: pointer; 1860 1860 - -ms-transition: background-color var(--pico-transition), 1692 1692 + -ms-transition: 1693 1693 + background-color var(--pico-transition), 1861 1694 transform var(--pico-transition); 1862 1862 - transition: background-color var(--pico-transition), 1695 1695 + transition: 1696 1696 + background-color var(--pico-transition), 1863 1697 transform var(--pico-transition); 1864 1698 } 1865 1699 [type="range"]:active, ··· 1880 1714 /** 1881 1715 * Input type search 1882 1716 */ 1883 1883 - input:not( 1884 1884 - [type="checkbox"], 1885 1885 - [type="radio"], 1886 1886 - [type="range"], 1887 1887 - [type="file"] 1888 1888 - )[type="search"] { 1889 1889 - padding-inline-start: calc( 1890 1890 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1891 1891 - ); 1717 1717 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1718 1718 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 1892 1719 background-image: var(--pico-icon-search); 1893 1893 - background-position: center left 1894 1894 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1720 1720 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1895 1721 background-size: 1rem auto; 1896 1722 background-repeat: no-repeat; 1897 1723 } 1898 1898 - input:not( 1899 1899 - [type="checkbox"], 1900 1900 - [type="radio"], 1901 1901 - [type="range"], 1902 1902 - [type="file"] 1903 1903 - )[type="search"][aria-invalid] { 1904 1904 - padding-inline-start: calc( 1905 1905 - var(--pico-form-element-spacing-horizontal) + 1.75rem 1906 1906 - ) !important; 1907 1907 - background-position: center left 1.125rem, center right 0.75rem; 1724 1724 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1725 1725 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1726 1726 + background-position: 1727 1727 + center left 1.125rem, 1728 1728 + center right 0.75rem; 1908 1729 } 1909 1909 - input:not( 1910 1910 - [type="checkbox"], 1911 1911 - [type="radio"], 1912 1912 - [type="range"], 1913 1913 - [type="file"] 1914 1914 - )[type="search"][aria-invalid="false"] { 1730 1730 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 1915 1731 background-image: var(--pico-icon-search), var(--pico-icon-valid); 1916 1732 } 1917 1917 - input:not( 1918 1918 - [type="checkbox"], 1919 1919 - [type="radio"], 1920 1920 - [type="range"], 1921 1921 - [type="file"] 1922 1922 - )[type="search"][aria-invalid="true"] { 1733 1733 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 1923 1734 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 1924 1735 } 1925 1736 1926 1926 - [dir="rtl"] 1927 1927 - :where(input):not( 1928 1928 - [type="checkbox"], 1929 1929 - [type="radio"], 1930 1930 - [type="range"], 1931 1931 - [type="file"] 1932 1932 - )[type="search"] { 1737 1737 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1933 1738 background-position: center right 1.125rem; 1934 1739 } 1935 1935 - [dir="rtl"] 1936 1936 - :where(input):not( 1937 1937 - [type="checkbox"], 1938 1938 - [type="radio"], 1939 1939 - [type="range"], 1940 1940 - [type="file"] 1941 1941 - )[type="search"][aria-invalid] { 1942 1942 - background-position: center right 1.125rem, center left 0.75rem; 1740 1740 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1741 1741 + background-position: 1742 1742 + center right 1.125rem, 1743 1743 + center left 0.75rem; 1943 1744 } 1944 1745 1945 1746 /** ··· 2031 1832 article > footer { 2032 1833 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2033 1834 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2034 2034 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2035 2035 - var(--pico-block-spacing-horizontal); 1835 1835 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2036 1836 background-color: var(--pico-card-sectioning-background-color); 2037 1837 } 2038 1838 article > header { ··· 2130 1930 width: auto; 2131 1931 } 2132 1932 @supports selector(:has(*)) { 2133 2133 - [role="search"]:has( 2134 2134 - button:focus, 2135 2135 - [type="submit"]:focus, 2136 2136 - [type="button"]:focus, 2137 2137 - [role="button"]:focus 2138 2138 - ), 2139 2139 - [role="group"]:has( 2140 2140 - button:focus, 2141 2141 - [type="submit"]:focus, 2142 2142 - [type="button"]:focus, 2143 2143 - [role="button"]:focus 2144 2144 - ) { 1933 1933 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 1934 1934 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2145 1935 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2146 1936 } 2147 2147 - [role="search"]:has( 2148 2148 - button:focus, 2149 2149 - [type="submit"]:focus, 2150 2150 - [type="button"]:focus, 2151 2151 - [role="button"]:focus 2152 2152 - ) 2153 2153 - input:not([type="checkbox"], [type="radio"]), 2154 2154 - [role="search"]:has( 2155 2155 - button:focus, 2156 2156 - [type="submit"]:focus, 2157 2157 - [type="button"]:focus, 2158 2158 - [role="button"]:focus 2159 2159 - ) 2160 2160 - select, 2161 2161 - [role="group"]:has( 2162 2162 - button:focus, 2163 2163 - [type="submit"]:focus, 2164 2164 - [type="button"]:focus, 2165 2165 - [role="button"]:focus 2166 2166 - ) 2167 2167 - input:not([type="checkbox"], [type="radio"]), 2168 2168 - [role="group"]:has( 2169 2169 - button:focus, 2170 2170 - [type="submit"]:focus, 2171 2171 - [type="button"]:focus, 2172 2172 - [role="button"]:focus 2173 2173 - ) 2174 2174 - select { 1937 1937 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1938 1938 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 1939 1939 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 1940 1940 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2175 1941 border-color: transparent; 2176 1942 } 2177 2177 - [role="search"]:has( 2178 2178 - input:not([type="submit"], [type="button"]):focus, 2179 2179 - select:focus 2180 2180 - ), 2181 2181 - [role="group"]:has( 2182 2182 - input:not([type="submit"], [type="button"]):focus, 2183 2183 - select:focus 2184 2184 - ) { 1943 1943 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 1944 1944 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2185 1945 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2186 1946 } 2187 2187 - [role="search"]:has( 2188 2188 - input:not([type="submit"], [type="button"]):focus, 2189 2189 - select:focus 2190 2190 - ) 2191 2191 - button, 2192 2192 - [role="search"]:has( 2193 2193 - input:not([type="submit"], [type="button"]):focus, 2194 2194 - select:focus 2195 2195 - ) 2196 2196 - [type="submit"], 2197 2197 - [role="search"]:has( 2198 2198 - input:not([type="submit"], [type="button"]):focus, 2199 2199 - select:focus 2200 2200 - ) 2201 2201 - [type="button"], 2202 2202 - [role="search"]:has( 2203 2203 - input:not([type="submit"], [type="button"]):focus, 2204 2204 - select:focus 2205 2205 - ) 2206 2206 - [role="button"], 2207 2207 - [role="group"]:has( 2208 2208 - input:not([type="submit"], [type="button"]):focus, 2209 2209 - select:focus 2210 2210 - ) 2211 2211 - button, 2212 2212 - [role="group"]:has( 2213 2213 - input:not([type="submit"], [type="button"]):focus, 2214 2214 - select:focus 2215 2215 - ) 2216 2216 - [type="submit"], 2217 2217 - [role="group"]:has( 2218 2218 - input:not([type="submit"], [type="button"]):focus, 2219 2219 - select:focus 2220 2220 - ) 2221 2221 - [type="button"], 2222 2222 - [role="group"]:has( 2223 2223 - input:not([type="submit"], [type="button"]):focus, 2224 2224 - select:focus 2225 2225 - ) 2226 2226 - [role="button"] { 2227 2227 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2228 2228 - var(--pico-primary-border); 2229 2229 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2230 2230 - var(--pico-primary-hover-border); 1947 1947 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1948 1948 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1949 1949 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1950 1950 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 1951 1951 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 1952 1952 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 1953 1953 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 1954 1954 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 1955 1955 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 1956 1956 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2231 1957 } 2232 1958 [role="search"] button:focus, 2233 1959 [role="search"] [type="submit"]:focus, ··· 2268 1994 content: ""; 2269 1995 vertical-align: -0.125em; 2270 1996 } 2271 2271 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2272 2272 - :empty 2273 2273 - )::before { 1997 1997 + [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2274 1998 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2275 1999 } 2276 2000 [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2367 2091 opacity: 0.5; 2368 2092 transition: opacity var(--pico-transition); 2369 2093 } 2370 2370 - dialog 2371 2371 - > article 2372 2372 - :is(a, button)[rel="prev"]:is( 2373 2373 - [aria-current]:not([aria-current="false"]), 2374 2374 - :hover, 2375 2375 - :active, 2376 2376 - :focus 2377 2377 - ) { 2094 2094 + dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2378 2095 opacity: 1; 2379 2096 } 2380 2097 dialog:not([open]), ··· 2417 2134 nav li { 2418 2135 display: inline-block; 2419 2136 margin: 0; 2420 2420 - padding: var(--pico-nav-element-spacing-vertical) 2421 2421 - var(--pico-nav-element-spacing-horizontal); 2137 2137 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2422 2138 } 2423 2139 nav li :where(a, [role="link"]) { 2424 2140 display: inline-block; 2425 2425 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2426 2426 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2427 2427 - padding: var(--pico-nav-link-spacing-vertical) 2428 2428 - var(--pico-nav-link-spacing-horizontal); 2141 2141 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2142 2142 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2429 2143 border-radius: var(--pico-border-radius); 2430 2144 } 2431 2145 nav li :where(a, [role="link"]):not(:hover) { ··· 2434 2148 nav li button, 2435 2149 nav li [role="button"], 2436 2150 nav li [type="button"], 2437 2437 - nav 2438 2438 - li 2439 2439 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2151 2151 + nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2440 2152 nav li select { 2441 2153 height: auto; 2442 2154 margin-right: inherit; 2443 2155 margin-bottom: 0; 2444 2156 margin-left: inherit; 2445 2445 - padding: calc( 2446 2446 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2447 2447 - ) 2448 2448 - var(--pico-nav-link-spacing-horizontal); 2157 2157 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2449 2158 } 2450 2159 nav[aria-label="breadcrumb"] { 2451 2160 align-items: center; ··· 2483 2192 display: block; 2484 2193 } 2485 2194 aside li { 2486 2486 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 2487 2487 - var(--pico-nav-element-spacing-horizontal); 2195 2195 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 2488 2196 } 2489 2197 aside li a { 2490 2198 display: block; ··· 2533 2241 } 2534 2242 @media (prefers-reduced-motion: no-preference) { 2535 2243 progress:indeterminate { 2536 2536 - background: var(--pico-progress-background-color) 2537 2537 - linear-gradient( 2538 2538 - to right, 2539 2539 - var(--pico-progress-color) 30%, 2540 2540 - var(--pico-progress-background-color) 30% 2541 2541 - ) 2244 2244 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 2542 2245 top left/150% 150% no-repeat; 2543 2246 animation: progress-indeterminate 1s linear infinite; 2544 2247 }

+207 -638

public/css/pico.green.css

reviewed

··· 8 8 */ 9 9 :root, 10 10 :host { 11 11 - --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", 12 12 - "Segoe UI Symbol", "Noto Color Emoji"; 13 13 - --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, 14 14 - Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, 15 15 - var(--pico-font-family-emoji); 16 16 - --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, 17 17 - Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 11 11 + --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 12 12 + --pico-font-family-sans-serif: 13 13 + system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji); 14 14 + --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji); 18 15 --pico-font-family: var(--pico-font-family-sans-serif); 19 16 --pico-line-height: 1.5; 20 17 --pico-font-weight: 400; ··· 33 30 --pico-form-element-spacing-vertical: 0.75rem; 34 31 --pico-form-element-spacing-horizontal: 1rem; 35 32 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0); 36 36 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 37 37 - var(--pico-primary-focus); 38 38 - --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem 39 39 - var(--pico-form-element-border-color); 33 33 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 34 34 + --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color); 40 35 --pico-modal-overlay-backdrop-filter: blur(0.375rem); 41 36 --pico-nav-element-spacing-vertical: 1rem; 42 37 --pico-nav-element-spacing-horizontal: 0.5rem; ··· 159 154 --pico-font-weight: bolder; 160 155 } 161 156 162 162 - input:not( 163 163 - [type="submit"], 164 164 - [type="button"], 165 165 - [type="reset"], 166 166 - [type="checkbox"], 167 167 - [type="radio"], 168 168 - [type="file"] 169 169 - ), 157 157 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 170 158 :where(select, textarea) { 171 159 --pico-outline-width: 0.0625rem; 172 160 } ··· 196 184 --pico-border-radius: 5rem; 197 185 } 198 186 199 199 - [role="search"]:has( 200 200 - button.secondary:focus, 201 201 - [type="submit"].secondary:focus, 202 202 - [type="button"].secondary:focus, 203 203 - [role="button"].secondary:focus 204 204 - ), 205 205 - [role="group"]:has( 206 206 - button.secondary:focus, 207 207 - [type="submit"].secondary:focus, 208 208 - [type="button"].secondary:focus, 209 209 - [role="button"].secondary:focus 210 210 - ) { 211 211 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 212 212 - var(--pico-secondary-focus); 187 187 + [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), 188 188 + [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) { 189 189 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 213 190 } 214 214 - [role="search"]:has( 215 215 - button.contrast:focus, 216 216 - [type="submit"].contrast:focus, 217 217 - [type="button"].contrast:focus, 218 218 - [role="button"].contrast:focus 219 219 - ), 220 220 - [role="group"]:has( 221 221 - button.contrast:focus, 222 222 - [type="submit"].contrast:focus, 223 223 - [type="button"].contrast:focus, 224 224 - [role="button"].contrast:focus 225 225 - ) { 226 226 - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) 227 227 - var(--pico-contrast-focus); 191 191 + [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), 192 192 + [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) { 193 193 + --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 228 194 } 229 195 [role="search"] button, 230 196 [role="search"] [type="submit"], ··· 241 207 filter: brightness(0) invert(1); 242 208 } 243 209 244 244 - [aria-busy="true"]:not(input, select, textarea):is( 245 245 - button, 246 246 - [type="submit"], 247 247 - [type="button"], 248 248 - [type="reset"], 249 249 - [role="button"] 250 250 - ):not(.outline)::before { 210 210 + [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline)::before { 251 211 filter: brightness(0) invert(1); 252 212 } 253 213 ··· 293 253 --pico-contrast-hover-underline: var(--pico-secondary-hover); 294 254 --pico-contrast-focus: rgba(93, 107, 137, 0.25); 295 255 --pico-contrast-inverse: #fff; 296 296 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 297 297 - 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 298 298 - 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 299 299 - 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 300 300 - 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 301 301 - 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 302 302 - 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 256 256 + --pico-box-shadow: 257 257 + 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 258 258 + 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 259 259 + 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); 303 260 --pico-h1-color: #2d3138; 304 261 --pico-h2-color: #373c44; 305 262 --pico-h3-color: #424751; ··· 331 288 --pico-form-element-disabled-opacity: 0.5; 332 289 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5); 333 290 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25); 334 334 - --pico-form-element-invalid-focus-color: var( 335 335 - --pico-form-element-invalid-active-border-color 336 336 - ); 291 291 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 337 292 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5); 338 293 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75); 339 339 - --pico-form-element-valid-focus-color: var( 340 340 - --pico-form-element-valid-active-border-color 341 341 - ); 294 294 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 342 295 --pico-switch-background-color: #bfc7d9; 343 296 --pico-switch-checked-background-color: var(--pico-primary-background); 344 297 --pico-switch-color: #fff; ··· 370 323 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 371 324 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 372 325 } 373 373 - [data-theme="light"] 374 374 - input:is( 375 375 - [type="submit"], 376 376 - [type="button"], 377 377 - [type="reset"], 378 378 - [type="checkbox"], 379 379 - [type="radio"], 380 380 - [type="file"] 381 381 - ), 382 382 - :root:not([data-theme="dark"]) 383 383 - input:is( 384 384 - [type="submit"], 385 385 - [type="button"], 386 386 - [type="reset"], 387 387 - [type="checkbox"], 388 388 - [type="radio"], 389 389 - [type="file"] 390 390 - ), 391 391 - :host(:not([data-theme="dark"])) 392 392 - input:is( 393 393 - [type="submit"], 394 394 - [type="button"], 395 395 - [type="reset"], 396 396 - [type="checkbox"], 397 397 - [type="radio"], 398 398 - [type="file"] 399 399 - ) { 326 326 + [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 327 327 + :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 328 328 + :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 400 329 --pico-form-element-focus-color: var(--pico-primary-focus); 401 330 } 402 331 ··· 439 368 --pico-contrast-hover-underline: var(--pico-contrast-hover); 440 369 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 441 370 --pico-contrast-inverse: #000; 442 442 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 443 443 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 444 444 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 445 445 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 446 446 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 447 447 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 371 371 + --pico-box-shadow: 372 372 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 373 373 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 374 374 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 448 375 --pico-h1-color: #f0f1f3; 449 376 --pico-h2-color: #e0e3e7; 450 377 --pico-h3-color: #c2c7d0; ··· 476 403 --pico-form-element-disabled-opacity: 0.5; 477 404 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 478 405 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 479 479 - --pico-form-element-invalid-focus-color: var( 480 480 - --pico-form-element-invalid-active-border-color 481 481 - ); 406 406 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 482 407 --pico-form-element-valid-border-color: #2a7b6f; 483 408 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 484 484 - --pico-form-element-valid-focus-color: var( 485 485 - --pico-form-element-valid-active-border-color 486 486 - ); 409 409 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 487 410 --pico-switch-background-color: #333c4e; 488 411 --pico-switch-checked-background-color: var(--pico-primary-background); 489 412 --pico-switch-color: #fff; ··· 515 438 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 516 439 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 517 440 } 518 518 - :root:not([data-theme]) 519 519 - input:is( 520 520 - [type="submit"], 521 521 - [type="button"], 522 522 - [type="reset"], 523 523 - [type="checkbox"], 524 524 - [type="radio"], 525 525 - [type="file"] 526 526 - ), 527 527 - :host(:not([data-theme])) 528 528 - input:is( 529 529 - [type="submit"], 530 530 - [type="button"], 531 531 - [type="reset"], 532 532 - [type="checkbox"], 533 533 - [type="radio"], 534 534 - [type="file"] 535 535 - ) { 441 441 + :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), 442 442 + :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 536 443 --pico-form-element-focus-color: var(--pico-primary-focus); 537 444 } 538 538 - :root:not([data-theme]) 539 539 - details 540 540 - summary[role="button"].contrast:not(.outline)::after, 541 541 - :host(:not([data-theme])) 542 542 - details 543 543 - summary[role="button"].contrast:not(.outline)::after { 445 445 + :root:not([data-theme]) details summary[role="button"].contrast:not(.outline)::after, 446 446 + :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline)::after { 544 447 filter: brightness(0); 545 448 } 546 449 :root:not([data-theme]) 547 547 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 548 548 - button, 549 549 - [type="submit"], 550 550 - [type="button"], 551 551 - [type="reset"], 552 552 - [role="button"] 553 553 - ):not(.outline)::before, 450 450 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 451 451 + .outline 452 452 + )::before, 554 453 :host(:not([data-theme])) 555 555 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 556 556 - button, 557 557 - [type="submit"], 558 558 - [type="button"], 559 559 - [type="reset"], 560 560 - [role="button"] 561 561 - ):not(.outline)::before { 454 454 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 455 455 + .outline 456 456 + )::before { 562 457 filter: brightness(0); 563 458 } 564 459 } ··· 599 494 --pico-contrast-hover-underline: var(--pico-contrast-hover); 600 495 --pico-contrast-focus: rgba(207, 213, 226, 0.25); 601 496 --pico-contrast-inverse: #000; 602 602 - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 603 603 - 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 604 604 - 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 605 605 - 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 606 606 - 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 607 607 - 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 497 497 + --pico-box-shadow: 498 498 + 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 499 499 + 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 500 500 + 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015); 608 501 --pico-h1-color: #f0f1f3; 609 502 --pico-h2-color: #e0e3e7; 610 503 --pico-h3-color: #c2c7d0; ··· 636 529 --pico-form-element-disabled-opacity: 0.5; 637 530 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80); 638 531 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59); 639 639 - --pico-form-element-invalid-focus-color: var( 640 640 - --pico-form-element-invalid-active-border-color 641 641 - ); 532 532 + --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); 642 533 --pico-form-element-valid-border-color: #2a7b6f; 643 534 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5); 644 644 - --pico-form-element-valid-focus-color: var( 645 645 - --pico-form-element-valid-active-border-color 646 646 - ); 535 535 + --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); 647 536 --pico-switch-background-color: #333c4e; 648 537 --pico-switch-checked-background-color: var(--pico-primary-background); 649 538 --pico-switch-color: #fff; ··· 675 564 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); 676 565 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); 677 566 } 678 678 - [data-theme="dark"] 679 679 - input:is( 680 680 - [type="submit"], 681 681 - [type="button"], 682 682 - [type="reset"], 683 683 - [type="checkbox"], 684 684 - [type="radio"], 685 685 - [type="file"] 686 686 - ) { 567 567 + [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) { 687 568 --pico-form-element-focus-color: var(--pico-primary-focus); 688 569 } 689 689 - [data-theme="dark"] 690 690 - details 691 691 - summary[role="button"].contrast:not(.outline)::after { 570 570 + [data-theme="dark"] details summary[role="button"].contrast:not(.outline)::after { 692 571 filter: brightness(0); 693 572 } 694 573 [data-theme="dark"] 695 695 - [aria-busy="true"]:not(input, select, textarea).contrast:is( 696 696 - button, 697 697 - [type="submit"], 698 698 - [type="button"], 699 699 - [type="reset"], 700 700 - [role="button"] 701 701 - ):not(.outline)::before { 574 574 + [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not( 575 575 + .outline 576 576 + )::before { 702 577 filter: brightness(0); 703 578 } 704 579 ··· 915 790 --pico-color: var(--pico-h6-color); 916 791 } 917 792 918 918 - :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) 919 919 - ~ :is(h1, h2, h3, h4, h5, h6) { 793 793 + :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { 920 794 margin-top: var(--pico-typography-spacing-top); 921 795 } 922 796 ··· 1009 883 text-decoration: var(--pico-text-decoration); 1010 884 text-decoration-color: var(--pico-underline); 1011 885 text-underline-offset: 0.125em; 1012 1012 - transition: background-color var(--pico-transition), 1013 1013 - color var(--pico-transition), box-shadow var(--pico-transition), 886 886 + transition: 887 887 + background-color var(--pico-transition), 888 888 + color var(--pico-transition), 889 889 + box-shadow var(--pico-transition), 1014 890 -webkit-text-decoration var(--pico-transition); 1015 1015 - transition: background-color var(--pico-transition), 1016 1016 - color var(--pico-transition), text-decoration var(--pico-transition), 891 891 + transition: 892 892 + background-color var(--pico-transition), 893 893 + color var(--pico-transition), 894 894 + text-decoration var(--pico-transition), 1017 895 box-shadow var(--pico-transition); 1018 1018 - transition: background-color var(--pico-transition), 1019 1019 - color var(--pico-transition), text-decoration var(--pico-transition), 896 896 + transition: 897 897 + background-color var(--pico-transition), 898 898 + color var(--pico-transition), 899 899 + text-decoration var(--pico-transition), 1020 900 box-shadow var(--pico-transition), 1021 901 -webkit-text-decoration var(--pico-transition); 1022 902 } 1023 1023 - :where(a:not([role="button"])):is( 1024 1024 - [aria-current]:not([aria-current="false"]), 1025 1025 - :hover, 1026 1026 - :active, 1027 1027 - :focus 1028 1028 - ), 1029 1029 - [role="link"]:is( 1030 1030 - [aria-current]:not([aria-current="false"]), 1031 1031 - :hover, 1032 1032 - :active, 1033 1033 - :focus 1034 1034 - ) { 903 903 + :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 904 904 + [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1035 905 --pico-color: var(--pico-primary-hover); 1036 906 --pico-underline: var(--pico-primary-hover-underline); 1037 907 --pico-text-decoration: underline; ··· 1045 915 --pico-color: var(--pico-secondary); 1046 916 --pico-underline: var(--pico-secondary-underline); 1047 917 } 1048 1048 - :where(a:not([role="button"])).secondary:is( 1049 1049 - [aria-current]:not([aria-current="false"]), 1050 1050 - :hover, 1051 1051 - :active, 1052 1052 - :focus 1053 1053 - ), 1054 1054 - [role="link"].secondary:is( 1055 1055 - [aria-current]:not([aria-current="false"]), 1056 1056 - :hover, 1057 1057 - :active, 1058 1058 - :focus 1059 1059 - ) { 918 918 + :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 919 919 + [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1060 920 --pico-color: var(--pico-secondary-hover); 1061 921 --pico-underline: var(--pico-secondary-hover-underline); 1062 922 } ··· 1065 925 --pico-color: var(--pico-contrast); 1066 926 --pico-underline: var(--pico-contrast-underline); 1067 927 } 1068 1068 - :where(a:not([role="button"])).contrast:is( 1069 1069 - [aria-current]:not([aria-current="false"]), 1070 1070 - :hover, 1071 1071 - :active, 1072 1072 - :focus 1073 1073 - ), 1074 1074 - [role="link"].contrast:is( 1075 1075 - [aria-current]:not([aria-current="false"]), 1076 1076 - :hover, 1077 1077 - :active, 1078 1078 - :focus 1079 1079 - ) { 928 928 + :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 929 929 + [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1080 930 --pico-color: var(--pico-contrast-hover); 1081 931 --pico-underline: var(--pico-contrast-hover-underline); 1082 932 } ··· 1112 962 --pico-border-color: var(--pico-primary-border); 1113 963 --pico-color: var(--pico-primary-inverse); 1114 964 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); 1115 1115 - padding: var(--pico-form-element-spacing-vertical) 1116 1116 - var(--pico-form-element-spacing-horizontal); 965 965 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1117 966 border: var(--pico-border-width) solid var(--pico-border-color); 1118 967 border-radius: var(--pico-border-radius); 1119 968 outline: none; ··· 1129 978 -webkit-user-select: none; 1130 979 -moz-user-select: none; 1131 980 user-select: none; 1132 1132 - transition: background-color var(--pico-transition), 1133 1133 - border-color var(--pico-transition), color var(--pico-transition), 981 981 + transition: 982 982 + background-color var(--pico-transition), 983 983 + border-color var(--pico-transition), 984 984 + color var(--pico-transition), 1134 985 box-shadow var(--pico-transition); 1135 986 } 1136 987 button:is([aria-current]:not([aria-current="false"])), ··· 1141 992 [type="reset"]:is(:hover, :active, :focus), 1142 993 [type="button"]:is([aria-current]:not([aria-current="false"])), 1143 994 [type="button"]:is(:hover, :active, :focus), 1144 1144 - [type="file"]::file-selector-button:is( 1145 1145 - [aria-current]:not([aria-current="false"]) 1146 1146 - ), 995 995 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])), 1147 996 [type="file"]::file-selector-button:is(:hover, :active, :focus), 1148 997 [role="button"]:is([aria-current]:not([aria-current="false"])), 1149 998 [role="button"]:is(:hover, :active, :focus) { ··· 1161 1010 [type="button"]:focus, 1162 1011 [type="button"]:is([aria-current]:not([aria-current="false"])):focus, 1163 1012 [type="file"]::file-selector-button:focus, 1164 1164 - [type="file"]::file-selector-button:is( 1165 1165 - [aria-current]:not([aria-current="false"]) 1166 1166 - ):focus, 1013 1013 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus, 1167 1014 [role="button"]:focus, 1168 1015 [role="button"]:is([aria-current]:not([aria-current="false"])):focus { 1169 1169 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1170 1170 - 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1016 1016 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); 1171 1017 } 1172 1018 1173 1019 [type="submit"], ··· 1184 1030 --pico-color: var(--pico-secondary-inverse); 1185 1031 cursor: pointer; 1186 1032 } 1187 1187 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is( 1188 1188 - [aria-current]:not([aria-current="false"]), 1189 1189 - :hover, 1190 1190 - :active, 1191 1191 - :focus 1192 1192 - ), 1193 1193 - [type="reset"]:is( 1194 1194 - [aria-current]:not([aria-current="false"]), 1195 1195 - :hover, 1196 1196 - :active, 1197 1197 - :focus 1198 1198 - ), 1199 1199 - [type="file"]::file-selector-button:is( 1200 1200 - [aria-current]:not([aria-current="false"]), 1201 1201 - :hover, 1202 1202 - :active, 1203 1203 - :focus 1204 1204 - ) { 1033 1033 + :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1034 1034 + [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1035 1035 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1205 1036 --pico-background-color: var(--pico-secondary-hover-background); 1206 1037 --pico-border-color: var(--pico-secondary-hover-border); 1207 1038 --pico-color: var(--pico-secondary-inverse); 1208 1039 } 1209 1040 :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus, 1210 1210 - :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is( 1211 1211 - [aria-current]:not([aria-current="false"]) 1212 1212 - ):focus, 1041 1041 + :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):focus, 1213 1042 [type="reset"]:focus, 1214 1043 [type="reset"]:is([aria-current]:not([aria-current="false"])):focus, 1215 1044 [type="file"]::file-selector-button:focus, 1216 1216 - [type="file"]::file-selector-button:is( 1217 1217 - [aria-current]:not([aria-current="false"]) 1218 1218 - ):focus { 1219 1219 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1220 1220 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1045 1045 + [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus { 1046 1046 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1221 1047 } 1222 1048 1223 1049 :is(button, [type="submit"], [type="button"], [role="button"]).contrast { ··· 1225 1051 --pico-border-color: var(--pico-contrast-border); 1226 1052 --pico-color: var(--pico-contrast-inverse); 1227 1053 } 1228 1228 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is( 1229 1229 - [aria-current]:not([aria-current="false"]), 1230 1230 - :hover, 1231 1231 - :active, 1232 1232 - :focus 1233 1233 - ) { 1054 1054 + :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1234 1055 --pico-background-color: var(--pico-contrast-hover-background); 1235 1056 --pico-border-color: var(--pico-contrast-hover-border); 1236 1057 --pico-color: var(--pico-contrast-inverse); 1237 1058 } 1238 1059 :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus, 1239 1239 - :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is( 1240 1240 - [aria-current]:not([aria-current="false"]) 1241 1241 - ):focus { 1242 1242 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 1243 1243 - 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 1060 1060 + :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus { 1061 1061 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); 1244 1062 } 1245 1063 1246 1064 :is(button, [type="submit"], [type="button"], [role="button"]).outline, ··· 1249 1067 --pico-color: var(--pico-primary); 1250 1068 --pico-border-color: var(--pico-primary); 1251 1069 } 1252 1252 - :is(button, [type="submit"], [type="button"], [role="button"]).outline:is( 1253 1253 - [aria-current]:not([aria-current="false"]), 1254 1254 - :hover, 1255 1255 - :active, 1256 1256 - :focus 1257 1257 - ), 1258 1258 - [type="reset"].outline:is( 1259 1259 - [aria-current]:not([aria-current="false"]), 1260 1260 - :hover, 1261 1261 - :active, 1262 1262 - :focus 1263 1263 - ) { 1070 1070 + :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1071 1071 + [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1264 1072 --pico-background-color: transparent; 1265 1073 --pico-color: var(--pico-primary-hover); 1266 1074 --pico-border-color: var(--pico-primary-hover); 1267 1075 } 1268 1076 1269 1269 - :is( 1270 1270 - button, 1271 1271 - [type="submit"], 1272 1272 - [type="button"], 1273 1273 - [role="button"] 1274 1274 - ).outline.secondary, 1077 1077 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, 1275 1078 [type="reset"].outline { 1276 1079 --pico-color: var(--pico-secondary); 1277 1080 --pico-border-color: var(--pico-secondary); 1278 1081 } 1279 1279 - :is( 1280 1280 - button, 1281 1281 - [type="submit"], 1282 1282 - [type="button"], 1283 1283 - [role="button"] 1284 1284 - ).outline.secondary:is( 1285 1285 - [aria-current]:not([aria-current="false"]), 1286 1286 - :hover, 1287 1287 - :active, 1288 1288 - :focus 1289 1289 - ), 1290 1290 - [type="reset"].outline:is( 1291 1291 - [aria-current]:not([aria-current="false"]), 1292 1292 - :hover, 1293 1293 - :active, 1294 1294 - :focus 1295 1295 - ) { 1082 1082 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 1083 1083 + [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1296 1084 --pico-color: var(--pico-secondary-hover); 1297 1085 --pico-border-color: var(--pico-secondary-hover); 1298 1086 } 1299 1087 1300 1300 - :is( 1301 1301 - button, 1302 1302 - [type="submit"], 1303 1303 - [type="button"], 1304 1304 - [role="button"] 1305 1305 - ).outline.contrast { 1088 1088 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast { 1306 1089 --pico-color: var(--pico-contrast); 1307 1090 --pico-border-color: var(--pico-contrast); 1308 1091 } 1309 1309 - :is( 1310 1310 - button, 1311 1311 - [type="submit"], 1312 1312 - [type="button"], 1313 1313 - [role="button"] 1314 1314 - ).outline.contrast:is( 1315 1315 - [aria-current]:not([aria-current="false"]), 1316 1316 - :hover, 1317 1317 - :active, 1318 1318 - :focus 1319 1319 - ) { 1092 1092 + :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 1320 1093 --pico-color: var(--pico-contrast-hover); 1321 1094 --pico-border-color: var(--pico-contrast-hover); 1322 1095 } 1323 1096 1324 1324 - :where( 1325 1325 - button, 1326 1326 - [type="submit"], 1327 1327 - [type="reset"], 1328 1328 - [type="button"], 1329 1329 - [role="button"] 1330 1330 - )[disabled], 1331 1331 - :where(fieldset[disabled]) 1332 1332 - :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1097 1097 + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], 1098 1098 + :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { 1333 1099 opacity: 0.5; 1334 1100 pointer-events: none; 1335 1101 } ··· 1575 1341 } 1576 1342 1577 1343 input:not([type="checkbox"], [type="radio"], [type="range"]) { 1578 1578 - height: calc( 1579 1579 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1580 1580 - var(--pico-border-width) * 2 1581 1581 - ); 1344 1344 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1582 1345 } 1583 1346 1584 1347 fieldset { ··· 1614 1377 -webkit-appearance: none; 1615 1378 -moz-appearance: none; 1616 1379 appearance: none; 1617 1617 - padding: var(--pico-form-element-spacing-vertical) 1618 1618 - var(--pico-form-element-spacing-horizontal); 1380 1380 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 1619 1381 } 1620 1382 1621 1383 input, ··· 1632 1394 box-shadow: var(--pico-box-shadow); 1633 1395 color: var(--pico-color); 1634 1396 font-weight: var(--pico-font-weight); 1635 1635 - transition: background-color var(--pico-transition), 1636 1636 - border-color var(--pico-transition), color var(--pico-transition), 1397 1397 + transition: 1398 1398 + background-color var(--pico-transition), 1399 1399 + border-color var(--pico-transition), 1400 1400 + color var(--pico-transition), 1637 1401 box-shadow var(--pico-transition); 1638 1402 } 1639 1403 1640 1640 - input:not( 1641 1641 - [type="submit"], 1642 1642 - [type="button"], 1643 1643 - [type="reset"], 1644 1644 - [type="checkbox"], 1645 1645 - [type="radio"], 1646 1646 - [readonly] 1647 1647 - ):is(:active, :focus), 1404 1404 + input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), 1648 1405 :where(select, textarea):not([readonly]):is(:active, :focus) { 1649 1406 --pico-background-color: var(--pico-form-element-active-background-color); 1650 1407 } 1651 1408 1652 1652 - input:not( 1653 1653 - [type="submit"], 1654 1654 - [type="button"], 1655 1655 - [type="reset"], 1656 1656 - [role="switch"], 1657 1657 - [readonly] 1658 1658 - ):is(:active, :focus), 1409 1409 + input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), 1659 1410 :where(select, textarea):not([readonly]):is(:active, :focus) { 1660 1411 --pico-border-color: var(--pico-form-element-active-border-color); 1661 1412 } 1662 1413 1663 1663 - input:not( 1664 1664 - [type="submit"], 1665 1665 - [type="button"], 1666 1666 - [type="reset"], 1667 1667 - [type="range"], 1668 1668 - [type="file"], 1669 1669 - [readonly] 1670 1670 - ):focus, 1414 1414 + input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, 1671 1415 :where(select, textarea):not([readonly]):focus { 1672 1672 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1673 1673 - var(--pico-form-element-focus-color); 1416 1416 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); 1674 1417 } 1675 1418 1676 1419 input:not([type="submit"], [type="button"], [type="reset"])[disabled], 1677 1420 select[disabled], 1678 1421 textarea[disabled], 1679 1422 label[aria-disabled="true"], 1680 1680 - :where(fieldset[disabled]) 1681 1681 - :is( 1682 1682 - input:not([type="submit"], [type="button"], [type="reset"]), 1683 1683 - select, 1684 1684 - textarea 1685 1685 - ) { 1423 1423 + :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) { 1686 1424 opacity: var(--pico-form-element-disabled-opacity); 1687 1425 pointer-events: none; 1688 1426 } ··· 1701 1439 [type="week"], 1702 1440 [type="range"] 1703 1441 )[aria-invalid] { 1704 1704 - padding-right: calc( 1705 1705 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1706 1706 - ) !important; 1442 1442 + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1707 1443 padding-left: var(--pico-form-element-spacing-horizontal); 1708 1444 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; 1709 1709 - padding-inline-end: calc( 1710 1710 - var(--pico-form-element-spacing-horizontal) + 1.5rem 1711 1711 - ) !important; 1445 1445 + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; 1712 1446 background-position: center right 0.75rem; 1713 1447 background-size: 1rem auto; 1714 1448 background-repeat: no-repeat; ··· 1741 1475 --pico-border-color: var(--pico-form-element-valid-border-color); 1742 1476 } 1743 1477 :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { 1744 1744 - --pico-border-color: var( 1745 1745 - --pico-form-element-valid-active-border-color 1746 1746 - ) !important; 1478 1478 + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; 1747 1479 } 1748 1748 - :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not( 1749 1749 - [type="checkbox"], 1750 1750 - [type="radio"] 1751 1751 - ) { 1752 1752 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1753 1753 - var(--pico-form-element-valid-focus-color) !important; 1480 1480 + :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1481 1481 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; 1754 1482 } 1755 1483 :where(input, select, textarea)[aria-invalid="true"] { 1756 1484 --pico-border-color: var(--pico-form-element-invalid-border-color); 1757 1485 } 1758 1486 :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { 1759 1759 - --pico-border-color: var( 1760 1760 - --pico-form-element-invalid-active-border-color 1761 1761 - ) !important; 1487 1487 + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; 1762 1488 } 1763 1763 - :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not( 1764 1764 - [type="checkbox"], 1765 1765 - [type="radio"] 1766 1766 - ) { 1767 1767 - --pico-box-shadow: 0 0 0 var(--pico-outline-width) 1768 1768 - var(--pico-form-element-invalid-focus-color) !important; 1489 1489 + :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) { 1490 1490 + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; 1769 1491 } 1770 1492 1771 1771 - [dir="rtl"] 1772 1772 - :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( 1773 1773 - [aria-invalid], 1774 1774 - [aria-invalid="true"], 1775 1775 - [aria-invalid="false"] 1776 1776 - ) { 1493 1493 + [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) { 1777 1494 background-position: center left 0.75rem; 1778 1495 } 1779 1496 ··· 1820 1537 resize: vertical; 1821 1538 } 1822 1539 textarea[aria-invalid] { 1823 1823 - --pico-icon-height: calc( 1824 1824 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 1825 1825 - var(--pico-border-width) * 2 1826 1826 - ); 1540 1540 + --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 1827 1541 background-position: top right 0.75rem !important; 1828 1542 background-size: 1rem var(--pico-icon-height) !important; 1829 1543 } ··· 2031 1745 background-size: var(--pico-icon-width) auto; 2032 1746 background-repeat: no-repeat; 2033 1747 } 2034 2034 - input:not( 2035 2035 - [type="checkbox"], 2036 2036 - [type="radio"], 2037 2037 - [type="range"], 2038 2038 - [type="file"] 2039 2039 - )[type="time"] { 1748 1748 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] { 2040 1749 background-image: var(--pico-icon-time); 2041 1750 } 2042 1751 ··· 2061 1770 background-image: none !important; 2062 1771 } 2063 1772 } 2064 2064 - [dir="rtl"] 2065 2065 - :is( 2066 2066 - [type="date"], 2067 2067 - [type="datetime-local"], 2068 2068 - [type="month"], 2069 2069 - [type="time"], 2070 2070 - [type="week"] 2071 2071 - ) { 1773 1773 + [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) { 2072 1774 text-align: right; 2073 1775 } 2074 1776 ··· 2086 1788 } 2087 1789 [type="file"]::file-selector-button { 2088 1790 margin-right: calc(var(--pico-spacing) / 2); 2089 2089 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2090 2090 - var(--pico-form-element-spacing-horizontal); 1791 1791 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2091 1792 } 2092 1793 [type="file"]:is(:hover, :active, :focus)::file-selector-button { 2093 1794 --pico-background-color: var(--pico-secondary-hover-background); 2094 1795 --pico-border-color: var(--pico-secondary-hover-border); 2095 1796 } 2096 1797 [type="file"]:focus::file-selector-button { 2097 2097 - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 2098 2098 - 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 1798 1798 + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); 2099 1799 } 2100 1800 2101 1801 /** ··· 2114 1814 height: 0.375rem; 2115 1815 border-radius: var(--pico-border-radius); 2116 1816 background-color: var(--pico-range-border-color); 2117 2117 - -webkit-transition: background-color var(--pico-transition), 1817 1817 + -webkit-transition: 1818 1818 + background-color var(--pico-transition), 2118 1819 box-shadow var(--pico-transition); 2119 2119 - transition: background-color var(--pico-transition), 1820 1820 + transition: 1821 1821 + background-color var(--pico-transition), 2120 1822 box-shadow var(--pico-transition); 2121 1823 } 2122 1824 [type="range"]::-moz-range-track { ··· 2124 1826 height: 0.375rem; 2125 1827 border-radius: var(--pico-border-radius); 2126 1828 background-color: var(--pico-range-border-color); 2127 2127 - -moz-transition: background-color var(--pico-transition), 1829 1829 + -moz-transition: 1830 1830 + background-color var(--pico-transition), 2128 1831 box-shadow var(--pico-transition); 2129 2129 - transition: background-color var(--pico-transition), 1832 1832 + transition: 1833 1833 + background-color var(--pico-transition), 2130 1834 box-shadow var(--pico-transition); 2131 1835 } 2132 1836 [type="range"]::-ms-track { ··· 2134 1838 height: 0.375rem; 2135 1839 border-radius: var(--pico-border-radius); 2136 1840 background-color: var(--pico-range-border-color); 2137 2137 - -ms-transition: background-color var(--pico-transition), 1841 1841 + -ms-transition: 1842 1842 + background-color var(--pico-transition), 2138 1843 box-shadow var(--pico-transition); 2139 2139 - transition: background-color var(--pico-transition), 1844 1844 + transition: 1845 1845 + background-color var(--pico-transition), 2140 1846 box-shadow var(--pico-transition); 2141 1847 } 2142 1848 [type="range"]::-webkit-slider-thumb { ··· 2148 1854 border-radius: 50%; 2149 1855 background-color: var(--pico-range-thumb-color); 2150 1856 cursor: pointer; 2151 2151 - -webkit-transition: background-color var(--pico-transition), 1857 1857 + -webkit-transition: 1858 1858 + background-color var(--pico-transition), 2152 1859 transform var(--pico-transition); 2153 2153 - transition: background-color var(--pico-transition), 1860 1860 + transition: 1861 1861 + background-color var(--pico-transition), 2154 1862 transform var(--pico-transition); 2155 1863 } 2156 1864 [type="range"]::-moz-range-thumb { ··· 2162 1870 border-radius: 50%; 2163 1871 background-color: var(--pico-range-thumb-color); 2164 1872 cursor: pointer; 2165 2165 - -moz-transition: background-color var(--pico-transition), 1873 1873 + -moz-transition: 1874 1874 + background-color var(--pico-transition), 2166 1875 transform var(--pico-transition); 2167 2167 - transition: background-color var(--pico-transition), 1876 1876 + transition: 1877 1877 + background-color var(--pico-transition), 2168 1878 transform var(--pico-transition); 2169 1879 } 2170 1880 [type="range"]::-ms-thumb { ··· 2176 1886 border-radius: 50%; 2177 1887 background-color: var(--pico-range-thumb-color); 2178 1888 cursor: pointer; 2179 2179 - -ms-transition: background-color var(--pico-transition), 1889 1889 + -ms-transition: 1890 1890 + background-color var(--pico-transition), 2180 1891 transform var(--pico-transition); 2181 2181 - transition: background-color var(--pico-transition), 1892 1892 + transition: 1893 1893 + background-color var(--pico-transition), 2182 1894 transform var(--pico-transition); 2183 1895 } 2184 1896 [type="range"]:active, ··· 2199 1911 /** 2200 1912 * Input type search 2201 1913 */ 2202 2202 - input:not( 2203 2203 - [type="checkbox"], 2204 2204 - [type="radio"], 2205 2205 - [type="range"], 2206 2206 - [type="file"] 2207 2207 - )[type="search"] { 2208 2208 - padding-inline-start: calc( 2209 2209 - var(--pico-form-element-spacing-horizontal) + 1.75rem 2210 2210 - ); 1914 1914 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 1915 1915 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); 2211 1916 background-image: var(--pico-icon-search); 2212 2212 - background-position: center left 2213 2213 - calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 1917 1917 + background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); 2214 1918 background-size: 1rem auto; 2215 1919 background-repeat: no-repeat; 2216 1920 } 2217 2217 - input:not( 2218 2218 - [type="checkbox"], 2219 2219 - [type="radio"], 2220 2220 - [type="range"], 2221 2221 - [type="file"] 2222 2222 - )[type="search"][aria-invalid] { 2223 2223 - padding-inline-start: calc( 2224 2224 - var(--pico-form-element-spacing-horizontal) + 1.75rem 2225 2225 - ) !important; 2226 2226 - background-position: center left 1.125rem, center right 0.75rem; 1921 1921 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1922 1922 + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; 1923 1923 + background-position: 1924 1924 + center left 1.125rem, 1925 1925 + center right 0.75rem; 2227 1926 } 2228 2228 - input:not( 2229 2229 - [type="checkbox"], 2230 2230 - [type="radio"], 2231 2231 - [type="range"], 2232 2232 - [type="file"] 2233 2233 - )[type="search"][aria-invalid="false"] { 1927 1927 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] { 2234 1928 background-image: var(--pico-icon-search), var(--pico-icon-valid); 2235 1929 } 2236 2236 - input:not( 2237 2237 - [type="checkbox"], 2238 2238 - [type="radio"], 2239 2239 - [type="range"], 2240 2240 - [type="file"] 2241 2241 - )[type="search"][aria-invalid="true"] { 1930 1930 + input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] { 2242 1931 background-image: var(--pico-icon-search), var(--pico-icon-invalid); 2243 1932 } 2244 1933 2245 2245 - [dir="rtl"] 2246 2246 - :where(input):not( 2247 2247 - [type="checkbox"], 2248 2248 - [type="radio"], 2249 2249 - [type="range"], 2250 2250 - [type="file"] 2251 2251 - )[type="search"] { 1934 1934 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] { 2252 1935 background-position: center right 1.125rem; 2253 1936 } 2254 2254 - [dir="rtl"] 2255 2255 - :where(input):not( 2256 2256 - [type="checkbox"], 2257 2257 - [type="radio"], 2258 2258 - [type="range"], 2259 2259 - [type="file"] 2260 2260 - )[type="search"][aria-invalid] { 2261 2261 - background-position: center right 1.125rem, center left 0.75rem; 1937 1937 + [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] { 1938 1938 + background-position: 1939 1939 + center right 1.125rem, 1940 1940 + center left 0.75rem; 2262 1941 } 2263 1942 2264 1943 /** ··· 2350 2029 article > footer { 2351 2030 margin-right: calc(var(--pico-block-spacing-horizontal) * -1); 2352 2031 margin-left: calc(var(--pico-block-spacing-horizontal) * -1); 2353 2353 - padding: calc(var(--pico-block-spacing-vertical) * 0.66) 2354 2354 - var(--pico-block-spacing-horizontal); 2032 2032 + padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); 2355 2033 background-color: var(--pico-card-sectioning-background-color); 2356 2034 } 2357 2035 article > header { ··· 2397 2075 } 2398 2076 2399 2077 details.dropdown > summary:not([role]) { 2400 2400 - height: calc( 2401 2401 - 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + 2402 2402 - var(--pico-border-width) * 2 2403 2403 - ); 2404 2404 - padding: var(--pico-form-element-spacing-vertical) 2405 2405 - var(--pico-form-element-spacing-horizontal); 2078 2078 + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); 2079 2079 + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); 2406 2080 border: var(--pico-border-width) solid var(--pico-form-element-border-color); 2407 2081 border-radius: var(--pico-border-radius); 2408 2082 background-color: var(--pico-form-element-background-color); ··· 2412 2086 -webkit-user-select: none; 2413 2087 -moz-user-select: none; 2414 2088 user-select: none; 2415 2415 - transition: background-color var(--pico-transition), 2416 2416 - border-color var(--pico-transition), color var(--pico-transition), 2089 2089 + transition: 2090 2090 + background-color var(--pico-transition), 2091 2091 + border-color var(--pico-transition), 2092 2092 + color var(--pico-transition), 2417 2093 box-shadow var(--pico-transition); 2418 2094 } 2419 2095 details.dropdown > summary:not([role]):active, ··· 2429 2105 } 2430 2106 details.dropdown > summary:not([role])[aria-invalid="false"] { 2431 2107 --pico-form-element-border-color: var(--pico-form-element-valid-border-color); 2432 2432 - --pico-form-element-active-border-color: var( 2433 2433 - --pico-form-element-valid-focus-color 2434 2434 - ); 2108 2108 + --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); 2435 2109 --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); 2436 2110 } 2437 2111 details.dropdown > summary:not([role])[aria-invalid="true"] { 2438 2112 --pico-form-element-border-color: var(--pico-form-element-invalid-border-color); 2439 2439 - --pico-form-element-active-border-color: var( 2440 2440 - --pico-form-element-invalid-focus-color 2441 2441 - ); 2113 2113 + --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); 2442 2114 --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); 2443 2115 } 2444 2116 ··· 2450 2122 transform: rotate(0deg) translateX(0rem); 2451 2123 } 2452 2124 nav details.dropdown > summary:not([role]) { 2453 2453 - height: calc( 2454 2454 - 1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 2455 2455 - ); 2456 2456 - padding: calc( 2457 2457 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2458 2458 - ) 2459 2459 - var(--pico-nav-link-spacing-horizontal); 2125 2125 + height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); 2126 2126 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 2460 2127 } 2461 2128 nav details.dropdown > summary:not([role]):focus-visible { 2462 2129 box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); ··· 2481 2148 color: var(--pico-dropdown-color); 2482 2149 white-space: nowrap; 2483 2150 opacity: 0; 2484 2484 - transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; 2151 2151 + transition: 2152 2152 + opacity var(--pico-transition), 2153 2153 + transform 0s ease-in-out 1s; 2485 2154 } 2486 2155 details.dropdown > summary + ul[dir="rtl"] { 2487 2156 right: 0; ··· 2490 2159 details.dropdown > summary + ul li { 2491 2160 width: 100%; 2492 2161 margin-bottom: 0; 2493 2493 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2494 2494 - var(--pico-form-element-spacing-horizontal); 2162 2162 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2495 2163 list-style: none; 2496 2164 } 2497 2165 details.dropdown > summary + ul li:first-of-type { ··· 2502 2170 } 2503 2171 details.dropdown > summary + ul li a { 2504 2172 display: block; 2505 2505 - margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) 2506 2506 - calc(var(--pico-form-element-spacing-horizontal) * -1); 2507 2507 - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 2508 2508 - var(--pico-form-element-spacing-horizontal); 2173 2173 + margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); 2174 2174 + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); 2509 2175 overflow: hidden; 2510 2176 border-radius: 0; 2511 2177 color: var(--pico-dropdown-color); ··· 2533 2199 details.dropdown[open] > summary + ul { 2534 2200 transform: scaleY(1); 2535 2201 opacity: 1; 2536 2536 - transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; 2202 2202 + transition: 2203 2203 + opacity var(--pico-transition), 2204 2204 + transform 0s ease-in-out 0s; 2537 2205 } 2538 2206 2539 2207 details.dropdown[open] > summary::before { ··· 2632 2300 width: auto; 2633 2301 } 2634 2302 @supports selector(:has(*)) { 2635 2635 - [role="search"]:has( 2636 2636 - button:focus, 2637 2637 - [type="submit"]:focus, 2638 2638 - [type="button"]:focus, 2639 2639 - [role="button"]:focus 2640 2640 - ), 2641 2641 - [role="group"]:has( 2642 2642 - button:focus, 2643 2643 - [type="submit"]:focus, 2644 2644 - [type="button"]:focus, 2645 2645 - [role="button"]:focus 2646 2646 - ) { 2303 2303 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), 2304 2304 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) { 2647 2305 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); 2648 2306 } 2649 2649 - [role="search"]:has( 2650 2650 - button:focus, 2651 2651 - [type="submit"]:focus, 2652 2652 - [type="button"]:focus, 2653 2653 - [role="button"]:focus 2654 2654 - ) 2655 2655 - input:not([type="checkbox"], [type="radio"]), 2656 2656 - [role="search"]:has( 2657 2657 - button:focus, 2658 2658 - [type="submit"]:focus, 2659 2659 - [type="button"]:focus, 2660 2660 - [role="button"]:focus 2661 2661 - ) 2662 2662 - select, 2663 2663 - [role="group"]:has( 2664 2664 - button:focus, 2665 2665 - [type="submit"]:focus, 2666 2666 - [type="button"]:focus, 2667 2667 - [role="button"]:focus 2668 2668 - ) 2669 2669 - input:not([type="checkbox"], [type="radio"]), 2670 2670 - [role="group"]:has( 2671 2671 - button:focus, 2672 2672 - [type="submit"]:focus, 2673 2673 - [type="button"]:focus, 2674 2674 - [role="button"]:focus 2675 2675 - ) 2676 2676 - select { 2307 2307 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 2308 2308 + [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, 2309 2309 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), 2310 2310 + [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select { 2677 2311 border-color: transparent; 2678 2312 } 2679 2679 - [role="search"]:has( 2680 2680 - input:not([type="submit"], [type="button"]):focus, 2681 2681 - select:focus 2682 2682 - ), 2683 2683 - [role="group"]:has( 2684 2684 - input:not([type="submit"], [type="button"]):focus, 2685 2685 - select:focus 2686 2686 - ) { 2313 2313 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), 2314 2314 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) { 2687 2315 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); 2688 2316 } 2689 2689 - [role="search"]:has( 2690 2690 - input:not([type="submit"], [type="button"]):focus, 2691 2691 - select:focus 2692 2692 - ) 2693 2693 - button, 2694 2694 - [role="search"]:has( 2695 2695 - input:not([type="submit"], [type="button"]):focus, 2696 2696 - select:focus 2697 2697 - ) 2698 2698 - [type="submit"], 2699 2699 - [role="search"]:has( 2700 2700 - input:not([type="submit"], [type="button"]):focus, 2701 2701 - select:focus 2702 2702 - ) 2703 2703 - [type="button"], 2704 2704 - [role="search"]:has( 2705 2705 - input:not([type="submit"], [type="button"]):focus, 2706 2706 - select:focus 2707 2707 - ) 2708 2708 - [role="button"], 2709 2709 - [role="group"]:has( 2710 2710 - input:not([type="submit"], [type="button"]):focus, 2711 2711 - select:focus 2712 2712 - ) 2713 2713 - button, 2714 2714 - [role="group"]:has( 2715 2715 - input:not([type="submit"], [type="button"]):focus, 2716 2716 - select:focus 2717 2717 - ) 2718 2718 - [type="submit"], 2719 2719 - [role="group"]:has( 2720 2720 - input:not([type="submit"], [type="button"]):focus, 2721 2721 - select:focus 2722 2722 - ) 2723 2723 - [type="button"], 2724 2724 - [role="group"]:has( 2725 2725 - input:not([type="submit"], [type="button"]):focus, 2726 2726 - select:focus 2727 2727 - ) 2728 2728 - [role="button"] { 2729 2729 - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) 2730 2730 - var(--pico-primary-border); 2731 2731 - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) 2732 2732 - var(--pico-primary-hover-border); 2317 2317 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 2318 2318 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 2319 2319 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 2320 2320 + [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], 2321 2321 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, 2322 2322 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], 2323 2323 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], 2324 2324 + [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] { 2325 2325 + --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); 2326 2326 + --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); 2733 2327 } 2734 2328 [role="search"] button:focus, 2735 2329 [role="search"] [type="submit"]:focus, ··· 2770 2364 content: ""; 2771 2365 vertical-align: -0.125em; 2772 2366 } 2773 2773 - [aria-busy="true"]:not(input, select, textarea, html, form):not( 2774 2774 - :empty 2775 2775 - )::before { 2367 2367 + [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before { 2776 2368 margin-inline-end: calc(var(--pico-spacing) * 0.5); 2777 2369 } 2778 2370 [aria-busy="true"]:not(input, select, textarea, html, form):empty { ··· 2871 2463 opacity: 0.5; 2872 2464 transition: opacity var(--pico-transition); 2873 2465 } 2874 2874 - dialog 2875 2875 - > article 2876 2876 - .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 2877 2877 - dialog 2878 2878 - > article 2879 2879 - :is(a, button)[rel="prev"]:is( 2880 2880 - [aria-current]:not([aria-current="false"]), 2881 2881 - :hover, 2882 2882 - :active, 2883 2883 - :focus 2884 2884 - ) { 2466 2466 + dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), 2467 2467 + dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { 2885 2468 opacity: 1; 2886 2469 } 2887 2470 dialog:not([open]), ··· 2969 2552 nav li { 2970 2553 display: inline-block; 2971 2554 margin: 0; 2972 2972 - padding: var(--pico-nav-element-spacing-vertical) 2973 2973 - var(--pico-nav-element-spacing-horizontal); 2555 2555 + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); 2974 2556 } 2975 2557 nav li :where(a, [role="link"]) { 2976 2558 display: inline-block; 2977 2977 - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 2978 2978 - calc(var(--pico-nav-link-spacing-horizontal) * -1); 2979 2979 - padding: var(--pico-nav-link-spacing-vertical) 2980 2980 - var(--pico-nav-link-spacing-horizontal); 2559 2559 + margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); 2560 2560 + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); 2981 2561 border-radius: var(--pico-border-radius); 2982 2562 } 2983 2563 nav li :where(a, [role="link"]):not(:hover) { ··· 2986 2566 nav li button, 2987 2567 nav li [role="button"], 2988 2568 nav li [type="button"], 2989 2989 - nav 2990 2990 - li 2991 2991 - input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2569 2569 + nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 2992 2570 nav li select { 2993 2571 height: auto; 2994 2572 margin-right: inherit; 2995 2573 margin-bottom: 0; 2996 2574 margin-left: inherit; 2997 2997 - padding: calc( 2998 2998 - var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2 2999 2999 - ) 3000 3000 - var(--pico-nav-link-spacing-horizontal); 2575 2575 + padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); 3001 2576 } 3002 2577 nav[aria-label="breadcrumb"] { 3003 2578 align-items: center; ··· 3035 2610 display: block; 3036 2611 } 3037 2612 aside li { 3038 3038 - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) 3039 3039 - var(--pico-nav-element-spacing-horizontal); 2613 2613 + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); 3040 2614 } 3041 2615 aside li a { 3042 2616 display: block; ··· 3085 2659 } 3086 2660 @media (prefers-reduced-motion: no-preference) { 3087 2661 progress:indeterminate { 3088 3088 - background: var(--pico-progress-background-color) 3089 3089 - linear-gradient( 3090 3090 - to right, 3091 3091 - var(--pico-progress-color) 30%, 3092 3092 - var(--pico-progress-background-color) 30% 3093 3093 - ) 2662 2662 + background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) 3094 2663 top left/150% 150% no-repeat; 3095 2664 animation: progress-indeterminate 1s linear infinite; 3096 2665 }

+13 -48

public/index.html

reviewed

··· 1 1 - <!DOCTYPE html> 1 1 + <!doctype html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8" /> ··· 136 136 try { 137 137 const response = await fetch("/api/config"); 138 138 config = await response.json(); 139 139 - document.getElementById("settings").textContent = JSON.stringify( 140 140 - config, 141 141 - null, 142 142 - 2 143 143 - ); 139 139 + document.getElementById("settings").textContent = JSON.stringify(config, null, 2); 144 140 145 141 if (config.turnstileEnabled && config.turnstileSiteKey) { 146 142 loadTurnstileWidget(config.turnstileSiteKey); ··· 158 154 function loadTurnstileWidget(siteKey) { 159 155 if (!window.turnstile) { 160 156 const script = document.createElement("script"); 161 161 - script.src = 162 162 - "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"; 157 157 + script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"; 163 158 script.async = true; 164 159 script.defer = true; 165 160 ··· 203 198 } 204 199 205 200 data.levels.forEach((level) => { 206 206 - const levelElement = template.content 207 207 - .cloneNode(true) 208 208 - .querySelector(".level-item"); 201 201 + const levelElement = template.content.cloneNode(true).querySelector(".level-item"); 209 202 210 203 levelElement.querySelector(".level-name").textContent = level.name; 211 204 levelElement.querySelector(".level-id").textContent = level.id; 212 205 levelElement.querySelector(".level-author").textContent = level.author; 213 213 - levelElement.querySelector(".level-created-at").textContent = formatDate( 214 214 - level.created_at 215 215 - ); 206 206 + levelElement.querySelector(".level-created-at").textContent = formatDate(level.created_at); 216 207 levelElement.querySelector(".level-sun").textContent = level.sun; 217 208 levelElement.querySelector(".level-is-water").checked = level.is_water; 218 209 levelElement.querySelector(".level-favorites").textContent = level.favorites; ··· 233 224 } 234 225 } catch (error) { 235 226 console.error("Error loading levels:", error); 236 236 - document.getElementById("levelsList").innerHTML = 237 237 - "<p>Error loading levels.</p>"; 227 227 + document.getElementById("levelsList").innerHTML = "<p>Error loading levels.</p>"; 238 228 } 239 229 } 240 230 ··· 296 286 try { 297 287 const response = await fetch(`/api/levels/${id}`); 298 288 const data = await response.json(); 299 299 - document.getElementById("levelDetails").textContent = JSON.stringify( 300 300 - data, 301 301 - null, 302 302 - 2 303 303 - ); 289 289 + document.getElementById("levelDetails").textContent = JSON.stringify(data, null, 2); 304 290 305 291 const getLevelForm = document.getElementById("getLevelForm"); 306 292 if (getLevelForm) { ··· 308 294 } 309 295 } catch (error) { 310 296 console.error("Error getting level details:", error); 311 311 - document.getElementById("levelDetails").textContent = JSON.stringify( 312 312 - { error: error.message }, 313 313 - null, 314 314 - 2 315 315 - ); 297 297 + document.getElementById("levelDetails").textContent = JSON.stringify({ error: error.message }, null, 2); 316 298 } 317 299 } 318 300 319 301 async function downloadLevel(id) { 320 302 try { 321 303 window.location.href = `/api/levels/${id}/download`; 322 322 - document.getElementById("downloadResponse").textContent = 323 323 - "Download initiated..."; 304 304 + document.getElementById("downloadResponse").textContent = "Download initiated..."; 324 305 325 306 const downloadForm = document.getElementById("downloadForm"); 326 307 if (downloadForm) { ··· 328 309 } 329 310 } catch (error) { 330 311 console.error("Error downloading level:", error); 331 331 - document.getElementById("downloadResponse").textContent = JSON.stringify( 332 332 - { error: error.message }, 333 333 - null, 334 334 - 2 335 335 - ); 312 312 + document.getElementById("downloadResponse").textContent = JSON.stringify({ error: error.message }, null, 2); 336 313 } 337 314 } 338 315 ··· 348 325 }); 349 326 350 327 const data = await response.json(); 351 351 - document.getElementById("favoriteResponse").textContent = JSON.stringify( 352 352 - data, 353 353 - null, 354 354 - 2 355 355 - ); 328 328 + document.getElementById("favoriteResponse").textContent = JSON.stringify(data, null, 2); 356 329 357 330 if (data.success) { 358 331 loadLevels(); ··· 364 337 } 365 338 } catch (error) { 366 339 console.error("Error favoriting level:", error); 367 367 - document.getElementById("favoriteResponse").textContent = JSON.stringify( 368 368 - { error: error.message }, 369 369 - null, 370 370 - 2 371 371 - ); 340 340 + document.getElementById("favoriteResponse").textContent = JSON.stringify({ error: error.message }, null, 2); 372 341 } 373 342 } 374 343 ··· 422 391 reader.readAsArrayBuffer(file); 423 392 } catch (error) { 424 393 console.error("Error uploading level:", error); 425 425 - document.getElementById("response").textContent = JSON.stringify( 426 426 - { error: error.message }, 427 427 - null, 428 428 - 2 429 429 - ); 394 394 + document.getElementById("response").textContent = JSON.stringify({ error: error.message }, null, 2); 430 395 } 431 396 } 432 397

+15 -8

public/js/pico.modal.js

reviewed

··· 3 3 * 4 4 * Pico.css - https://picocss.com 5 5 * Copyright 2019-2024 - Licensed under MIT 6 6 - */$1//$2\l$3onfig 6 6 + */ $1; //$2\l$3onfig 7 7 const isOpenClass = "modal-is-open"; 8 8 const openingClass = "modal-is-opening"; 9 9 const closingClass = "modal-is-closing"; 10 10 const scrollbarWidthCssVar = "--pico-scrollbar-width"; 11 11 const animationDuration = 400; // ms 12 12 - let visibleModal = null;$1//$2\l$3oggle modal 12 12 + let visibleModal = null; 13 13 + $1; //$2\l$3oggle modal 13 14 const toggleModal = (event) => { 14 15 event.preventDefault(); 15 16 const modal = document.getElementById(event.currentTarget.dataset.target); 16 17 if (!modal) return; 17 18 // oxlint-disable-next-line no-unused-expressions 18 19 modal && (modal.open ? closeModal(modal) : openModal(modal)); 19 19 - };$1//$2\l$3pen modal 20 20 + }; 21 21 + $1; //$2\l$3pen modal 20 22 const openModal = (modal) => { 21 23 const { documentElement: html } = document; 22 24 const scrollbarWidth = getScrollbarWidth(); ··· 29 31 html.classList.remove(openingClass); 30 32 }, animationDuration); 31 33 modal.showModal(); 32 32 - };$1//$2\l$3lose modal 34 34 + }; 35 35 + $1; //$2\l$3lose modal 33 36 const closeModal = (modal) => { 34 37 visibleModal = null; 35 38 const { documentElement: html } = document; ··· 39 42 html.style.removeProperty(scrollbarWidthCssVar); 40 43 modal.close(); 41 44 }, animationDuration); 42 42 - };$1//$2\l$3lose with a click outside 45 45 + }; 46 46 + $1; //$2\l$3lose with a click outside 43 47 document.addEventListener("click", (event) => { 44 48 if (visibleModal === null) return; 45 49 const modalContent = visibleModal.querySelector("article"); 46 50 const isClickInside = modalContent.contains(event.target); 47 51 // oxlint-disable-next-line no-unused-expressions 48 52 !isClickInside && closeModal(visibleModal); 49 49 - });$1//$2\l$3lose with Esc key 53 53 + }); 54 54 + $1; //$2\l$3lose with Esc key 50 55 document.addEventListener("keydown", (event) => { 51 56 if (event.key === "Escape" && visibleModal) { 52 57 closeModal(visibleModal); 53 58 } 54 54 - });$1//$2\l$3et scrollbar width 59 59 + }); 60 60 + $1; //$2\l$3et scrollbar width 55 61 const getScrollbarWidth = () => { 56 62 const scrollbarWidth = globalThis.innerWidth - document.documentElement.clientWidth; 57 63 return scrollbarWidth; 58 58 - };$1//$2\l$3s scrollbar visible 64 64 + }; 65 65 + $1; //$2\l$3s scrollbar visible 59 66 // oxlint-disable-next-line no-unused-vars 60 67 const isScrollbarVisible = () => { 61 68 return document.body.scrollHeight > screen.height;