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

Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier.

Browse source 
Added cursor back on button - it was just an arrow.
Added parent-selector to the notifications, and corrected readbility of notifications.
updated the version within the css files
made rows only show up on css files where classes are enabled
made the tooltips have a dark background - even for dark themes.
This commit is contained in:
Yohn 2024-12-07 19:56:51 -05:00
parent 7ce5b5c578
commit 354887554b
256 changed files with 1699 additions and 41261 deletions
Download patch file Download diff file Expand all files Collapse all files

25
css/pico.conditional.slate.css
View file

@ -1,6 +1,6 @@
@charset "UTF-8";
/*!
* Pico CSS ✨ v2.0.6 (https://picocss.com)
* Pico CSS ✨ v2.1.3 (https://github.com/Yohn/PicoCSS)
* Copyright 2019-2024 - Licensed under MIT
*/
/**
@ -27,8 +27,8 @@
--pico-block-spacing-horizontal: var(--pico-spacing);
--pico-grid-column-gap: var(--pico-spacing);
--pico-grid-row-gap: var(--pico-spacing);
--pico-form-element-spacing-vertical: 0.75rem;
--pico-form-element-spacing-horizontal: 1rem;
--pico-form-element-spacing-vertical: calc(var(--pico-spacing) * 0.5);
--pico-form-element-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
--pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
@ -223,7 +223,7 @@ nav details.dropdown summary:focus-visible {
filter: brightness(0) invert(1);
}
.pico [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
.pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
filter: brightness(0) invert(1);
}
@ -462,8 +462,8 @@ nav details.dropdown summary:focus-visible {
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-tooltip-background-color: var(--pico-contrast-inverse);
--pico-tooltip-color: var(--pico-contrast-background);
--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");
--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");
--pico-timeline-line-color: var(--pico-primary-background);
@ -601,8 +601,8 @@ nav details.dropdown summary:focus-visible {
--pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
--pico-tooltip-color: var(--pico-contrast-inverse);
--pico-tooltip-background-color: var(--pico-contrast-inverse);
--pico-tooltip-color: var(--pico-contrast-background);
--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");
--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");
--pico-timeline-line-color: var(--pico-primary-background);
@ -1527,6 +1527,7 @@ main {
line-height: var(--pico-line-height);
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
@ -3524,7 +3525,7 @@ body:has(dialog[open]) {
/**
* Notification (<dialog>)
*/
dialog[role=alert] {
.pico dialog[role=alert] {
position: fixed;
top: unset;
right: var(--pico-spacing);
@ -3551,18 +3552,18 @@ dialog[role=alert] {
-moz-user-select: none;
user-select: none;
}
dialog[role=alert] > * {
.pico dialog[role=alert] * {
color: var(--pico-primary-inverse);
font-weight: var(--pico-font-weight);
font-size: var(--pico-font-size);
line-height: var(--pico-line-height);
}
dialog[data-backdrop=false][role=alert]::backdrop {
.pico dialog[data-backdrop=false][role=alert]::backdrop {
display: none;
}
dialog[role=alert][open] {
.pico dialog[role=alert][open] {
opacity: 1;
transition: opacity var(--pico-transition);
}