mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 11:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Build CSS

Browse source
This commit is contained in:
github-actions[bot] 2025-01-24 20:30:38 +00:00
parent 19e03a348b
commit a2e01fc601
255 changed files with 9815 additions and 2037 deletions
Download patch file Download diff file Expand all files Collapse all files

151
css/pico.classless.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8";
/*!
* Pico CSS ✨ v2.2.8 (https://github.com/Yohn/PicoCSS)
* Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2025 - Licensed under MIT
*/
/**
@ -203,19 +203,19 @@ input:not([type=submit],
color-scheme: light;
--pico-background-color: #fff;
--pico-color: #373c44;
--pico-text-selection-color: rgba(183, 136, 0, 0.25);
--pico-text-selection-color: rgba(2, 154, 232, 0.25);
--pico-muted-color: #646b79;
--pico-muted-border-color: rgb(231, 234, 239.5);
--pico-primary: #876400;
--pico-primary-background: #ffbf00;
--pico-primary: #0172ad;
--pico-primary-background: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(135, 100, 0, 0.5);
--pico-primary-hover: #694d00;
--pico-primary-hover-background: #e8ae01;
--pico-primary-underline: rgba(1, 114, 173, 0.5);
--pico-primary-hover: #015887;
--pico-primary-hover-background: #02659a;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(183, 136, 0, 0.5);
--pico-primary-inverse: #000;
--pico-primary-focus: rgba(2, 154, 232, 0.5);
--pico-primary-inverse: #fff;
--pico-secondary: #5d6b89;
--pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
@ -279,7 +279,7 @@ input:not([type=submit],
--pico-switch-background-color: #bfc7d9;
--pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #dfe3eb;
--pico-range-active-border-color: #bfc7d9;
--pico-range-thumb-border-color: var(--pico-background-color);
@ -309,12 +309,12 @@ input:not([type=submit],
[data-theme=light] details summary[role=button]::after,
:root:not([data-theme=dark]) details summary[role=button]::after,
:host(:not([data-theme=dark])) details summary[role=button]::after {
filter: brightness(100) invert(1);
filter: brightness(100) invert(0);
}
[data-theme=light] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before,
:root:not([data-theme=dark]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before,
:host(:not([data-theme=dark])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
filter: brightness(0) invert(1);
filter: brightness(100) invert(0);
}
[data-theme=light] input:is([type=submit],
[type=button],
@ -343,19 +343,19 @@ input:not([type=submit],
color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #c79400;
--pico-primary-background: #ffbf00;
--pico-primary: #01aaff;
--pico-primary-background: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(199, 148, 0, 0.5);
--pico-primary-hover: #e8ae01;
--pico-primary-hover-background: #fecc63;
--pico-primary-underline: rgba(1, 170, 255, 0.5);
--pico-primary-hover: #79c0ff;
--pico-primary-hover-background: #017fc0;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(199, 148, 0, 0.375);
--pico-primary-inverse: #000;
--pico-primary-focus: rgba(1, 170, 255, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
@ -419,7 +419,7 @@ input:not([type=submit],
--pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #202632;
--pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color);
@ -462,30 +462,30 @@ input:not([type=submit],
}
:root:not([data-theme]) details summary[role=button]::after,
:host(:not([data-theme])) details summary[role=button]::after {
filter: brightness(100) invert(1);
filter: brightness(100) invert(0);
}
:root:not([data-theme]) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before,
:host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
filter: brightness(100) invert(0);
filter: brightness(100) invert(1);
}
}
[data-theme=dark] {
color-scheme: dark;
--pico-background-color: rgb(19, 22.5, 30.5);
--pico-color: #c2c7d0;
--pico-text-selection-color: rgba(199, 148, 0, 0.1875);
--pico-text-selection-color: rgba(1, 170, 255, 0.1875);
--pico-muted-color: #7b8495;
--pico-muted-border-color: #202632;
--pico-primary: #c79400;
--pico-primary-background: #ffbf00;
--pico-primary: #01aaff;
--pico-primary-background: #0172ad;
--pico-primary-border: var(--pico-primary-background);
--pico-primary-underline: rgba(199, 148, 0, 0.5);
--pico-primary-hover: #e8ae01;
--pico-primary-hover-background: #fecc63;
--pico-primary-underline: rgba(1, 170, 255, 0.5);
--pico-primary-hover: #79c0ff;
--pico-primary-hover-background: #017fc0;
--pico-primary-hover-border: var(--pico-primary-hover-background);
--pico-primary-hover-underline: var(--pico-primary-hover);
--pico-primary-focus: rgba(199, 148, 0, 0.375);
--pico-primary-inverse: #000;
--pico-primary-focus: rgba(1, 170, 255, 0.375);
--pico-primary-inverse: #fff;
--pico-secondary: #969eaf;
--pico-secondary-background: #525f7a;
--pico-secondary-border: var(--pico-secondary-background);
@ -549,7 +549,7 @@ input:not([type=submit],
--pico-switch-background-color: #333c4e;
--pico-switch-checked-background-color: var(--pico-primary-background);
--pico-switch-color: #fff;
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-range-border-color: #202632;
--pico-range-active-border-color: #2a3140;
--pico-range-thumb-border-color: var(--pico-background-color);
@ -585,10 +585,10 @@ input:not([type=submit],
--pico-form-element-focus-color: var(--pico-primary-focus);
}
[data-theme=dark] details summary[role=button]::after {
filter: brightness(100) invert(1);
filter: brightness(100) invert(0);
}
[data-theme=dark] [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button])::before {
filter: brightness(100) invert(0);
filter: brightness(100) invert(1);
}
progress,
@ -2079,6 +2079,8 @@ details {
margin-bottom: var(--pico-spacing);
}
details summary {
position: relative;
padding-inline-end: var(--pico-block-spacing-horizontal);
line-height: 1rem;
list-style-type: none;
cursor: pointer;
@ -2097,10 +2099,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
position: absolute;
top: calc(var(--pico-block-spacing-vertical) * 0.5);
right: calc(var(--pico-block-spacing-horizontal) * 0.5);
width: 1rem;
height: 1rem;
margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
float: right;
transform: rotate(-90deg);
background-image: var(--pico-icon-chevron);
background-position: right center;
@ -2354,6 +2358,8 @@ article > form > footer ol:has(+ [type=hidden]),
/**
* Group ([role="group"], [role="search"])
*/
/* V3 Remove, modifing the <legend> placement is disabled
* in chrome.*/
fieldset[role=group] > legend {
float: left;
}
@ -2914,7 +2920,6 @@ aside li [role=button] {
*/
nav[role=navigation] {
z-index: 1;
align-items: center;
width: 100%;
overflow: visible;
}
@ -2935,6 +2940,10 @@ nav[role=navigation] > label {
-moz-user-select: none;
user-select: none;
}
nav[role=navigation] > ul > li > [role=search],
nav[role=navigation] > ol > li > [role=search] {
margin-block-end: 0;
}
@media (max-width: 510px) {
nav[role=navigation] {
@ -2948,6 +2957,7 @@ nav[role=navigation] > label {
display: block;
}
nav[role=navigation] > [role=list] {
display: none;
flex-direction: column;
align-items: flex-start;
width: 90vw;
@ -2955,18 +2965,25 @@ nav[role=navigation] > label {
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
opacity: 0;
transition: max-height var(--pico-transition), opacity var(--pico-transition);
}
nav[role=navigation] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
nav[role=navigation] > [role=list] li > details.dropdown {
width: 100%;
}
nav[role=navigation] > [role=list] li > form[role=search] {
margin-block-end: 0;
}
nav[role=navigation] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
border-block-end: 1px solid transparent;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
nav[role=navigation] > [role=list] a:hover {
@ -2974,7 +2991,9 @@ nav[role=navigation] > label {
text-decoration: none;
}
nav[role=navigation] input[type=checkbox]:checked ~ [role=list] {
display: block;
max-height: 100vh;
opacity: 1;
}
}
@media (max-width: 700px) {
@ -2989,6 +3008,7 @@ nav[role=navigation] > label {
display: block;
}
nav[role=navigation][data-breakpoint=md] > [role=list] {
display: none;
flex-direction: column;
align-items: flex-start;
width: 90vw;
@ -2996,18 +3016,25 @@ nav[role=navigation] > label {
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
opacity: 0;
transition: max-height var(--pico-transition), opacity var(--pico-transition);
}
nav[role=navigation][data-breakpoint=md] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
nav[role=navigation][data-breakpoint=md] > [role=list] li > details.dropdown {
width: 100%;
}
nav[role=navigation][data-breakpoint=md] > [role=list] li > form[role=search] {
margin-block-end: 0;
}
nav[role=navigation][data-breakpoint=md] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
border-block-end: 1px solid transparent;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
nav[role=navigation][data-breakpoint=md] > [role=list] a:hover {
@ -3015,7 +3042,9 @@ nav[role=navigation] > label {
text-decoration: none;
}
nav[role=navigation][data-breakpoint=md] input[type=checkbox]:checked ~ [role=list] {
display: block;
max-height: 100vh;
opacity: 1;
}
}
@media (max-width: 950px) {
@ -3030,6 +3059,7 @@ nav[role=navigation] > label {
display: block;
}
nav[role=navigation][data-breakpoint=lg] > [role=list] {
display: none;
flex-direction: column;
align-items: flex-start;
width: 90vw;
@ -3037,18 +3067,25 @@ nav[role=navigation] > label {
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
opacity: 0;
transition: max-height var(--pico-transition), opacity var(--pico-transition);
}
nav[role=navigation][data-breakpoint=lg] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
nav[role=navigation][data-breakpoint=lg] > [role=list] li > details.dropdown {
width: 100%;
}
nav[role=navigation][data-breakpoint=lg] > [role=list] li > form[role=search] {
margin-block-end: 0;
}
nav[role=navigation][data-breakpoint=lg] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
border-block-end: 1px solid transparent;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
nav[role=navigation][data-breakpoint=lg] > [role=list] a:hover {
@ -3056,7 +3093,9 @@ nav[role=navigation] > label {
text-decoration: none;
}
nav[role=navigation][data-breakpoint=lg] input[type=checkbox]:checked ~ [role=list] {
display: block;
max-height: 100vh;
opacity: 1;
}
}
@media (max-width: 1200px) {
@ -3071,6 +3110,7 @@ nav[role=navigation] > label {
display: block;
}
nav[role=navigation][data-breakpoint=xl] > [role=list] {
display: none;
flex-direction: column;
align-items: flex-start;
width: 90vw;
@ -3078,18 +3118,25 @@ nav[role=navigation] > label {
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
opacity: 0;
transition: max-height var(--pico-transition), opacity var(--pico-transition);
}
nav[role=navigation][data-breakpoint=xl] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
nav[role=navigation][data-breakpoint=xl] > [role=list] li > details.dropdown {
width: 100%;
}
nav[role=navigation][data-breakpoint=xl] > [role=list] li > form[role=search] {
margin-block-end: 0;
}
nav[role=navigation][data-breakpoint=xl] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
border-block-end: 1px solid transparent;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
nav[role=navigation][data-breakpoint=xl] > [role=list] a:hover {
@ -3097,7 +3144,9 @@ nav[role=navigation] > label {
text-decoration: none;
}
nav[role=navigation][data-breakpoint=xl] input[type=checkbox]:checked ~ [role=list] {
display: block;
max-height: 100vh;
opacity: 1;
}
}
@media (max-width: 1450px) {
@ -3112,6 +3161,7 @@ nav[role=navigation] > label {
display: block;
}
nav[role=navigation][data-breakpoint=xxl] > [role=list] {
display: none;
flex-direction: column;
align-items: flex-start;
width: 90vw;
@ -3119,18 +3169,25 @@ nav[role=navigation] > label {
margin: 0 auto;
background-color: var(--pico-muted-border-color);
box-shadow: var(--pico-box-shadow);
transition: max-height var(--pico-transition);
opacity: 0;
transition: max-height var(--pico-transition), opacity var(--pico-transition);
}
nav[role=navigation][data-breakpoint=xxl] > [role=list] li {
width: calc(100% - var(--pico-nav-link-spacing-vertical) * 2);
margin: calc(var(--pico-nav-link-spacing-vertical) * 0.5) var(--pico-nav-link-spacing-vertical);
padding: 0;
}
nav[role=navigation][data-breakpoint=xxl] > [role=list] li > details.dropdown {
width: 100%;
}
nav[role=navigation][data-breakpoint=xxl] > [role=list] li > form[role=search] {
margin-block-end: 0;
}
nav[role=navigation][data-breakpoint=xxl] > [role=list] a {
display: block;
margin: 0;
border-bottom: 1px solid transparent;
border-radius: 0;
border-block-end: 1px solid transparent;
transition: border-color var(--pico-transition), color var(--pico-transition);
}
nav[role=navigation][data-breakpoint=xxl] > [role=list] a:hover {
@ -3138,7 +3195,9 @@ nav[role=navigation] > label {
text-decoration: none;
}
nav[role=navigation][data-breakpoint=xxl] input[type=checkbox]:checked ~ [role=list] {
display: block;
max-height: 100vh;
opacity: 1;
}
}
/**