@anyblades/pico 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/pico.blades.css +74 -34
- package/css/pico.blades.min.css +4 -4
- package/css/pico.css +10 -4
- package/css/pico.min.css +2 -2
- package/package.json +3 -3
- package/src/_content.css +7 -2
- package/src/_forms.css +1 -0
- package/src/pico.blades.css +2 -2
- package/src/pico.css +1 -1
package/css/pico.blades.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/*!
|
|
3
|
-
* Pico+Blades CSS ✨🥷 v2.
|
|
3
|
+
* Pico+Blades CSS ✨🥷 v2.4
|
|
4
4
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
5
5
|
* Licensed under MIT
|
|
6
6
|
*/
|
|
7
7
|
/*!
|
|
8
|
-
* Pico CSS ✨ v2.
|
|
8
|
+
* Pico CSS ✨ v2.4
|
|
9
9
|
* Copyright 2019-2025 (https://picocss.com)
|
|
10
10
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
11
11
|
* Licensed under MIT
|
|
@@ -1232,9 +1232,11 @@ audio:not([controls]) {
|
|
|
1232
1232
|
:where(iframe) {
|
|
1233
1233
|
border-style: none;
|
|
1234
1234
|
}
|
|
1235
|
-
img {
|
|
1236
|
-
|
|
1237
|
-
|
|
1235
|
+
img:not([height]) {
|
|
1236
|
+
max-width: 100%;
|
|
1237
|
+
height: auto;
|
|
1238
|
+
}
|
|
1239
|
+
img{
|
|
1238
1240
|
border-style: none;
|
|
1239
1241
|
}
|
|
1240
1242
|
:where(svg:not([fill])) {
|
|
@@ -1249,6 +1251,7 @@ svg:not(:host) {
|
|
|
1249
1251
|
*/
|
|
1250
1252
|
pre,
|
|
1251
1253
|
code,
|
|
1254
|
+
var,
|
|
1252
1255
|
kbd,
|
|
1253
1256
|
samp {
|
|
1254
1257
|
font-size: 0.875em;
|
|
@@ -1265,6 +1268,7 @@ pre {
|
|
|
1265
1268
|
}
|
|
1266
1269
|
pre,
|
|
1267
1270
|
code,
|
|
1271
|
+
var,
|
|
1268
1272
|
kbd,
|
|
1269
1273
|
samp {
|
|
1270
1274
|
border-radius: var(--pico-border-radius);
|
|
@@ -1274,6 +1278,7 @@ samp {
|
|
|
1274
1278
|
line-height: initial;
|
|
1275
1279
|
}
|
|
1276
1280
|
code,
|
|
1281
|
+
var,
|
|
1277
1282
|
kbd,
|
|
1278
1283
|
samp {
|
|
1279
1284
|
display: inline-block;
|
|
@@ -1398,6 +1403,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
|
|
1398
1403
|
}
|
|
1399
1404
|
fieldset {
|
|
1400
1405
|
width: 100%;
|
|
1406
|
+
min-width: 0;
|
|
1401
1407
|
margin: 0;
|
|
1402
1408
|
margin-bottom: var(--pico-spacing);
|
|
1403
1409
|
padding: 0;
|
|
@@ -3101,7 +3107,7 @@ How it works:
|
|
|
3101
3107
|
transform: translateX(-50%);
|
|
3102
3108
|
}
|
|
3103
3109
|
/* Respect img/picture min-width */
|
|
3104
|
-
.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
|
|
3110
|
+
.breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
|
|
3105
3111
|
min-width: auto;
|
|
3106
3112
|
}
|
|
3107
3113
|
/* Max out the width of the element */
|
|
@@ -3499,11 +3505,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
|
|
|
3499
3505
|
```
|
|
3500
3506
|
How it works:
|
|
3501
3507
|
```css */
|
|
3502
|
-
|
|
3503
|
-
padding: 1rem 1.5rem;
|
|
3504
|
-
padding-inline-end: 2rem;
|
|
3505
|
-
}
|
|
3506
|
-
@media (max-width: 767px) {
|
|
3508
|
+
@media (width < 768px) {
|
|
3507
3509
|
pre {
|
|
3508
3510
|
border-radius: 0
|
|
3509
3511
|
}
|
|
@@ -3516,9 +3518,6 @@ code[data-caption]::before {
|
|
|
3516
3518
|
font-style: italic;
|
|
3517
3519
|
opacity: 50%;
|
|
3518
3520
|
}
|
|
3519
|
-
code:where(pre > *) {
|
|
3520
|
-
padding: 0;
|
|
3521
|
-
}
|
|
3522
3521
|
/*```
|
|
3523
3522
|
\3c !--section--> */
|
|
3524
3523
|
/* Forms */
|
|
@@ -3527,9 +3526,9 @@ code:where(pre > *) {
|
|
|
3527
3526
|
|
|
3528
3527
|
First, we target either:
|
|
3529
3528
|
1. `<label>` which `:has` inner form inputs (classless approach)
|
|
3530
|
-
2. or explicit `.has-float-label` class (
|
|
3529
|
+
2. or explicit `.has-float-label` class (explicit approach)
|
|
3531
3530
|
```css */
|
|
3532
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
3531
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
3533
3532
|
.has-float-label {
|
|
3534
3533
|
display: block;
|
|
3535
3534
|
position: relative;
|
|
@@ -3538,8 +3537,8 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
|
|
|
3538
3537
|
```
|
|
3539
3538
|
Then, we define the default/fallback state (when the float label should be minimized):
|
|
3540
3539
|
```css */
|
|
3541
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
|
|
3542
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
|
|
3540
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
|
|
3541
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
|
|
3543
3542
|
.has-float-label > span,
|
|
3544
3543
|
.has-float-label label {
|
|
3545
3544
|
position: absolute;
|
|
@@ -3552,21 +3551,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
|
|
|
3552
3551
|
```
|
|
3553
3552
|
Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
|
|
3554
3553
|
```css */
|
|
3555
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
|
|
3554
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
|
|
3556
3555
|
opacity: 0;
|
|
3557
3556
|
}
|
|
3558
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
|
|
3557
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
|
|
3559
3558
|
opacity: 0;
|
|
3560
3559
|
}
|
|
3561
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
|
|
3560
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
|
|
3562
3561
|
opacity: 0;
|
|
3563
3562
|
}
|
|
3564
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
|
|
3563
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
|
|
3565
3564
|
font-size: inherit;
|
|
3566
3565
|
opacity: 50%;
|
|
3567
3566
|
}
|
|
3568
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
|
|
3569
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
|
|
3567
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
|
|
3568
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
|
|
3570
3569
|
.has-float-label:has(*:placeholder-shown:not(:focus)) > span,
|
|
3571
3570
|
.has-float-label:has(*:placeholder-shown:not(:focus)) label {
|
|
3572
3571
|
font-size: inherit;
|
|
@@ -3578,6 +3577,29 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
|
|
|
3578
3577
|
|
|
3579
3578
|
Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
|
|
3580
3579
|
\3c !--section--> */
|
|
3580
|
+
/* Components */
|
|
3581
|
+
/*\3c !--section:docs-->
|
|
3582
|
+
|
|
3583
|
+
Use `dl.timeline` or wrap a `<dl>` with `.has-timeline` to style it as a
|
|
3584
|
+
vertical timeline — each `<dd>` gets a left border strip acting as the track:
|
|
3585
|
+
|
|
3586
|
+
<article class="has-timeline">
|
|
3587
|
+
|
|
3588
|
+
May 11, 2026
|
|
3589
|
+
: First Blades CSS stable release (v2.2.0).
|
|
3590
|
+
|
|
3591
|
+
Mar 15, 2025
|
|
3592
|
+
: Last Pico CSS update (v2.1.1).
|
|
3593
|
+
|
|
3594
|
+
</article>
|
|
3595
|
+
|
|
3596
|
+
\3c !--section:code-->```css */
|
|
3597
|
+
dl.timeline dd, .has-timeline > dl dd {
|
|
3598
|
+
margin-block: 0;
|
|
3599
|
+
padding: 0.25rem 0 0.75rem 1rem;
|
|
3600
|
+
border-inline-start: 0.25rem solid gray;
|
|
3601
|
+
}
|
|
3602
|
+
/*```*/
|
|
3581
3603
|
/* Utilities */
|
|
3582
3604
|
/* Extends https://github.com/picocss/pico/tree/main/scss/utilities
|
|
3583
3605
|
\3c !--section:docs-->
|
|
@@ -3637,8 +3659,8 @@ How it works:
|
|
|
3637
3659
|
\3c !--section:code-->
|
|
3638
3660
|
```css */
|
|
3639
3661
|
/* Default/fallback state */
|
|
3640
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
|
|
3641
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
|
|
3662
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
|
|
3663
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
|
|
3642
3664
|
.has-float-label > span,
|
|
3643
3665
|
.has-float-label label {
|
|
3644
3666
|
padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
|
|
@@ -3646,9 +3668,9 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
|
|
|
3646
3668
|
opacity: 75%;
|
|
3647
3669
|
transition: all 0.25s;
|
|
3648
3670
|
}
|
|
3649
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
|
|
3650
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
|
|
3651
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
|
|
3671
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
|
|
3672
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
|
|
3673
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
|
|
3652
3674
|
.has-float-label input,
|
|
3653
3675
|
.has-float-label textarea,
|
|
3654
3676
|
.has-float-label select {
|
|
@@ -3656,21 +3678,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
|
|
|
3656
3678
|
padding-inline-start: 1rem; /* match Pico */
|
|
3657
3679
|
padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
|
|
3658
3680
|
}
|
|
3659
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
|
|
3681
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
|
|
3660
3682
|
opacity: 100%;
|
|
3661
3683
|
-moz-transition: all 0.25s;
|
|
3662
3684
|
transition: all 0.25s;
|
|
3663
3685
|
}
|
|
3664
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
|
|
3686
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
|
|
3665
3687
|
opacity: 100%;
|
|
3666
3688
|
transition: all 0.25s;
|
|
3667
3689
|
}
|
|
3668
3690
|
/* Enlarged state */
|
|
3669
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
|
|
3691
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
|
|
3670
3692
|
padding-block: 0.75rem; /* match Pico */
|
|
3671
3693
|
}
|
|
3672
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
|
|
3673
|
-
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
|
|
3694
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
|
|
3695
|
+
label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
|
|
3674
3696
|
.has-float-label:has(*:placeholder-shown:not(:focus)) > span,
|
|
3675
3697
|
.has-float-label:has(*:placeholder-shown:not(:focus)) label {
|
|
3676
3698
|
padding-block: 0.75rem; /* match Pico */
|
|
@@ -3713,6 +3735,14 @@ a:not([href^="#"]) {
|
|
|
3713
3735
|
a:not([href^="#"]):hover {
|
|
3714
3736
|
text-decoration-thickness: 2px;
|
|
3715
3737
|
}
|
|
3738
|
+
h1,
|
|
3739
|
+
h2,
|
|
3740
|
+
h3,
|
|
3741
|
+
h4,
|
|
3742
|
+
h5,
|
|
3743
|
+
h6 {
|
|
3744
|
+
text-wrap: balance;
|
|
3745
|
+
}
|
|
3716
3746
|
h1 {
|
|
3717
3747
|
margin-bottom: 1rem; /* for tw-typography */
|
|
3718
3748
|
font-size: 2.5em; /* for pico.css & tw-typography */
|
|
@@ -3723,10 +3753,20 @@ hr {
|
|
|
3723
3753
|
ul ul {
|
|
3724
3754
|
font-size: 87.5%;
|
|
3725
3755
|
}
|
|
3756
|
+
dl dt {
|
|
3757
|
+
margin-block: 0.25rem;
|
|
3758
|
+
font-weight: 500;
|
|
3759
|
+
}
|
|
3760
|
+
dl dd {
|
|
3761
|
+
margin-block-end: 1rem;
|
|
3762
|
+
}
|
|
3726
3763
|
pre small {
|
|
3727
3764
|
font-weight: lighter;
|
|
3728
3765
|
opacity: 75%;
|
|
3729
3766
|
}
|
|
3767
|
+
pre:has(code) {
|
|
3768
|
+
background: #181c25 !important;
|
|
3769
|
+
}
|
|
3730
3770
|
table th {
|
|
3731
3771
|
font-weight: bold;
|
|
3732
3772
|
vertical-align: bottom;
|
package/css/pico.blades.min.css
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@charset "UTF-8";/*!
|
|
2
|
-
* Pico+Blades CSS ✨🥷 v2.
|
|
2
|
+
* Pico+Blades CSS ✨🥷 v2.4
|
|
3
3
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
4
4
|
* Licensed under MIT
|
|
5
5
|
*//*!
|
|
6
|
-
* Pico CSS ✨ v2.
|
|
6
|
+
* Pico CSS ✨ v2.4
|
|
7
7
|
* Copyright 2019-2025 (https://picocss.com)
|
|
8
8
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
9
9
|
* Licensed under MIT
|
|
@@ -59,7 +59,7 @@ button,[type=submit],[type=button],[type=reset],[role=button]
|
|
|
59
59
|
[aria-current]:not([aria-current=false]),:hover,:active,:focus
|
|
60
60
|
),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-border-color:var(--pico-secondary-hover)}:is(button,[type=submit],[type=button],[role=button]).outline.contrast{--pico-color:var(--pico-contrast);--pico-border-color:var(--pico-contrast)}:is(button,[type=submit],[type=button],[role=button]).outline.contrast:is(
|
|
61
61
|
[aria-current]:not([aria-current=false]),:hover,:active,:focus
|
|
62
|
-
){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],:where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:start}tfoot td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}:where(iframe){border-style:none}img{max-width:100%;height:auto
|
|
62
|
+
){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],:where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:start}tfoot td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}:where(iframe){border-style:none}img:not([height]){max-width:100%;height:auto}img{border-style:none}:where(svg:not([fill])){fill:currentColor}svg:not(:host),svg:not(:root){overflow:hidden}code,kbd,pre,samp,var{font-size:.875em;font-family:var(--pico-font-family)}pre code,pre samp{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre,samp,var{border-radius:var(--pico-border-radius);background:var(--pico-code-background-color);color:var(--pico-code-color);font-weight:var(--pico-font-weight);line-height:initial}code,kbd,samp,var{display:inline-block;padding:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code,pre>samp{display:block;padding:var(--pico-spacing);background:0 0;line-height:var(--pico-line-height)}kbd{background-color:var(--pico-code-kbd-background-color);color:var(--pico-code-kbd-color);vertical-align:baseline}figure{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}hr{height:0;margin:var(--pico-typography-spacing-vertical) 0;border:0;border-top:1px solid var(--pico-muted-border-color);color:inherit}[hidden],template{display:none!important}canvas{display:inline-block}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:0}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox],[type=radio],[type=range]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2)}fieldset{width:100%;min-width:0;margin:0;margin-bottom:var(--pico-spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .375);color:var(--pico-color);font-weight:var(--pico-form-label-font-weight,var(--pico-font-weight))}fieldset legend{margin-bottom:calc(var(--pico-spacing) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),select,textarea{width:100%}input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal)}input,select,textarea{--pico-background-color:var(--pico-form-element-background-color);--pico-border-color:var(--pico-form-element-border-color);--pico-color:var(--pico-form-element-color);--pico-box-shadow:none;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not(
|
|
63
63
|
[type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]
|
|
64
64
|
):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(
|
|
65
65
|
:active,:focus
|
|
@@ -110,4 +110,4 @@ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
|
|
|
110
110
|
table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
|
|
111
111
|
),.breakout>:is(
|
|
112
112
|
table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
|
|
113
|
-
){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture),.breakout>:is(img,picture){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}a:has(> i){display:inline-flex;overflow-y:clip;gap:.375ch;text-wrap:balance}a>i{float:left;font-style:normal;text-underline-offset:-2em}a>i>img{display:inline-block;max-width:none;height:1.25em;margin-block-start:calc(-0.25em / 2)}a>i[class*=" fa-"],a>i[class^=fa-]{line-height:inherit;--fa-width:auto}a>i.fa-lg{line-height:normal}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}
|
|
113
|
+
){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}a:has(> i){display:inline-flex;overflow-y:clip;gap:.375ch;text-wrap:balance}a>i{float:left;font-style:normal;text-underline-offset:-2em}a>i>img{display:inline-block;max-width:none;height:1.25em;margin-block-start:calc(-0.25em / 2)}a>i[class*=" fa-"],a>i[class^=fa-]{line-height:inherit;--fa-width:auto}a>i.fa-lg{line-height:normal}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}.has-float-label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select){display:block;position:relative}.has-float-label label,.has-float-label>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{position:absolute;top:0;left:0;font-size:75%;cursor:text}.has-float-label :placeholder-shown:not(:focus)::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}.has-float-label :-moz-placeholder:not(:focus)::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :-moz-placeholder:not(:focus)::placeholder{opacity:0}.has-float-label :placeholder-shown:not(:focus)::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::placeholder{opacity:0}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{font-size:inherit;opacity:50%}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{font-size:inherit;opacity:50%}.has-timeline>dl dd,dl.timeline dd{margin-block:0;padding:.25rem 0 .75rem 1rem;border-inline-start:0.25rem solid gray}:root{--blades-dark-filter:invert(100%) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.dark-auto{filter:var(--blades-dark-filter)}}.dark-auto:where([data-theme=dark] *),.dark-auto[data-theme=dark]{filter:var(--blades-dark-filter)}.faded{opacity:50%}.faded:hover{opacity:87.5%}.invert ::-webkit-scrollbar{filter:invert(1)!important}.has-float-label label,.has-float-label>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{padding-inline-start:calc(1rem + 1px);padding-block-start:0.25rem;opacity:75%;transition:all .25s}.has-float-label input,.has-float-label select,.has-float-label textarea,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea{margin-block-start:0;padding-inline-start:1rem;padding-block:1.125rem 0.375rem}.has-float-label input::-moz-placeholder,.has-float-label select::-moz-placeholder,.has-float-label textarea::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::-moz-placeholder{opacity:100%;-moz-transition:all .25s;transition:all .25s}.has-float-label input::placeholder,.has-float-label select::placeholder,.has-float-label textarea::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::placeholder{opacity:100%;transition:all .25s}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{padding-block:0.75rem}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{padding-block:0.75rem}html{overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;flex-direction:column;min-height:100dvh}body>main{flex-grow:1}body{hyphens:auto;text-wrap:pretty}body a,body table{hyphens:none}a:not([href^="#"]){text-decoration-thickness:1px}a:not([href^="#"]):hover{text-decoration-thickness:2px}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1{margin-bottom:1rem;font-size:2.5em}hr{margin-block:2em}ul ul{font-size:87.5%}dl dt{margin-block:0.25rem;font-weight:500}dl dd{margin-block-end:1rem}pre small{font-weight:lighter;opacity:75%}pre:has(code){background:#181c25!important}table th{font-weight:700;vertical-align:bottom}table td{vertical-align:top}table pre{margin-bottom:.25rem}[data-jump-to=top]{opacity:25%}[data-jump-to=top]:hover{opacity:75%}[data-jump-to=top]>i{display:inline-block;margin:.5rem;padding:.25rem .375rem;border-color:#000;color:#000;font-size:.75rem}.breakout-all>figure,.breakout-all>img,.breakout>figure,.breakout>img{margin-bottom:1rem}.faded a{text-decoration-style:dotted}
|
package/css/pico.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/*!
|
|
3
|
-
* Pico CSS ✨ v2.
|
|
3
|
+
* Pico CSS ✨ v2.4
|
|
4
4
|
* Copyright 2019-2025 (https://picocss.com)
|
|
5
5
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
6
6
|
* Licensed under MIT
|
|
@@ -1227,9 +1227,11 @@ audio:not([controls]) {
|
|
|
1227
1227
|
:where(iframe) {
|
|
1228
1228
|
border-style: none;
|
|
1229
1229
|
}
|
|
1230
|
-
img {
|
|
1231
|
-
|
|
1232
|
-
|
|
1230
|
+
img:not([height]) {
|
|
1231
|
+
max-width: 100%;
|
|
1232
|
+
height: auto;
|
|
1233
|
+
}
|
|
1234
|
+
img{
|
|
1233
1235
|
border-style: none;
|
|
1234
1236
|
}
|
|
1235
1237
|
:where(svg:not([fill])) {
|
|
@@ -1244,6 +1246,7 @@ svg:not(:host) {
|
|
|
1244
1246
|
*/
|
|
1245
1247
|
pre,
|
|
1246
1248
|
code,
|
|
1249
|
+
var,
|
|
1247
1250
|
kbd,
|
|
1248
1251
|
samp {
|
|
1249
1252
|
font-size: 0.875em;
|
|
@@ -1260,6 +1263,7 @@ pre {
|
|
|
1260
1263
|
}
|
|
1261
1264
|
pre,
|
|
1262
1265
|
code,
|
|
1266
|
+
var,
|
|
1263
1267
|
kbd,
|
|
1264
1268
|
samp {
|
|
1265
1269
|
border-radius: var(--pico-border-radius);
|
|
@@ -1269,6 +1273,7 @@ samp {
|
|
|
1269
1273
|
line-height: initial;
|
|
1270
1274
|
}
|
|
1271
1275
|
code,
|
|
1276
|
+
var,
|
|
1272
1277
|
kbd,
|
|
1273
1278
|
samp {
|
|
1274
1279
|
display: inline-block;
|
|
@@ -1393,6 +1398,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
|
|
1393
1398
|
}
|
|
1394
1399
|
fieldset {
|
|
1395
1400
|
width: 100%;
|
|
1401
|
+
min-width: 0;
|
|
1396
1402
|
margin: 0;
|
|
1397
1403
|
margin-bottom: var(--pico-spacing);
|
|
1398
1404
|
padding: 0;
|
package/css/pico.min.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@charset "UTF-8";/*!
|
|
2
|
-
* Pico CSS ✨ v2.
|
|
2
|
+
* Pico CSS ✨ v2.4
|
|
3
3
|
* Copyright 2019-2025 (https://picocss.com)
|
|
4
4
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
5
5
|
* Licensed under MIT
|
|
@@ -55,7 +55,7 @@ button,[type=submit],[type=button],[type=reset],[role=button]
|
|
|
55
55
|
[aria-current]:not([aria-current=false]),:hover,:active,:focus
|
|
56
56
|
),[type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-border-color:var(--pico-secondary-hover)}:is(button,[type=submit],[type=button],[role=button]).outline.contrast{--pico-color:var(--pico-contrast);--pico-border-color:var(--pico-contrast)}:is(button,[type=submit],[type=button],[role=button]).outline.contrast:is(
|
|
57
57
|
[aria-current]:not([aria-current=false]),:hover,:active,:focus
|
|
58
|
-
){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],:where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:start}tfoot td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}:where(iframe){border-style:none}img{max-width:100%;height:auto
|
|
58
|
+
){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}:where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],:where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:start}tfoot td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}:where(iframe){border-style:none}img:not([height]){max-width:100%;height:auto}img{border-style:none}:where(svg:not([fill])){fill:currentColor}svg:not(:host),svg:not(:root){overflow:hidden}code,kbd,pre,samp,var{font-size:.875em;font-family:var(--pico-font-family)}pre code,pre samp{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre,samp,var{border-radius:var(--pico-border-radius);background:var(--pico-code-background-color);color:var(--pico-code-color);font-weight:var(--pico-font-weight);line-height:initial}code,kbd,samp,var{display:inline-block;padding:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code,pre>samp{display:block;padding:var(--pico-spacing);background:0 0;line-height:var(--pico-line-height)}kbd{background-color:var(--pico-code-kbd-background-color);color:var(--pico-code-kbd-color);vertical-align:baseline}figure{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}hr{height:0;margin:var(--pico-typography-spacing-vertical) 0;border:0;border-top:1px solid var(--pico-muted-border-color);color:inherit}[hidden],template{display:none!important}canvas{display:inline-block}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:0}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox],[type=radio],[type=range]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2)}fieldset{width:100%;min-width:0;margin:0;margin-bottom:var(--pico-spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .375);color:var(--pico-color);font-weight:var(--pico-form-label-font-weight,var(--pico-font-weight))}fieldset legend{margin-bottom:calc(var(--pico-spacing) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),select,textarea{width:100%}input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal)}input,select,textarea{--pico-background-color:var(--pico-form-element-background-color);--pico-border-color:var(--pico-form-element-border-color);--pico-color:var(--pico-form-element-color);--pico-box-shadow:none;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not(
|
|
59
59
|
[type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]
|
|
60
60
|
):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(
|
|
61
61
|
:active,:focus
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anyblades/pico",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "Minimal CSS Framework for semantic HTML",
|
|
5
5
|
"author": "Lucas Larroche",
|
|
6
6
|
"contributors": [
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css !css/*.min.css"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@anyblades/blades": "^2.
|
|
44
|
+
"@anyblades/blades": "^2.4.1",
|
|
45
45
|
"autoprefixer": "^10.4.21",
|
|
46
46
|
"clean-css-cli": "^5.6.3",
|
|
47
47
|
"css-declaration-sorter": "^7.2.0",
|
|
@@ -54,4 +54,4 @@
|
|
|
54
54
|
"browserslist": [
|
|
55
55
|
"defaults"
|
|
56
56
|
]
|
|
57
|
-
}
|
|
57
|
+
}
|
package/src/_content.css
CHANGED
|
@@ -496,8 +496,10 @@ audio:not([controls]) {
|
|
|
496
496
|
}
|
|
497
497
|
|
|
498
498
|
img {
|
|
499
|
-
|
|
500
|
-
|
|
499
|
+
&:not([height]) {
|
|
500
|
+
max-width: 100%;
|
|
501
|
+
height: auto;
|
|
502
|
+
}
|
|
501
503
|
border-style: none;
|
|
502
504
|
}
|
|
503
505
|
|
|
@@ -515,6 +517,7 @@ svg:not(:host) {
|
|
|
515
517
|
*/
|
|
516
518
|
pre,
|
|
517
519
|
code,
|
|
520
|
+
var,
|
|
518
521
|
kbd,
|
|
519
522
|
samp {
|
|
520
523
|
font-size: 0.875em;
|
|
@@ -534,6 +537,7 @@ pre {
|
|
|
534
537
|
|
|
535
538
|
pre,
|
|
536
539
|
code,
|
|
540
|
+
var,
|
|
537
541
|
kbd,
|
|
538
542
|
samp {
|
|
539
543
|
border-radius: var(--pico-border-radius);
|
|
@@ -544,6 +548,7 @@ samp {
|
|
|
544
548
|
}
|
|
545
549
|
|
|
546
550
|
code,
|
|
551
|
+
var,
|
|
547
552
|
kbd,
|
|
548
553
|
samp {
|
|
549
554
|
display: inline-block;
|
package/src/_forms.css
CHANGED
package/src/pico.blades.css
CHANGED