mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
New --button-box-shadow var
+ rename `--form-element-focus` to `--form-element-focus-color` + code cleaning
This commit is contained in:
Lucas Larroche
parent
fc67f39278
commit
dd534ef6a6
21 changed files with 136 additions and 85 deletions
|
|
@ -214,13 +214,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
|
|
@ -298,13 +300,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -383,13 +387,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -883,7 +889,7 @@ a[role="button"] {
|
|||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -914,6 +920,7 @@ a[role="button"]:active,
|
|||
a[role="button"]:focus {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
button:focus,
|
||||
|
|
@ -921,7 +928,7 @@ input[type="submit"]:focus,
|
|||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
a[role="button"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
|
||||
input[type="reset"] {
|
||||
|
|
@ -937,7 +944,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
|
|||
}
|
||||
|
||||
input[type="reset"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
|
|
@ -1103,7 +1110,7 @@ textarea:focus {
|
|||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
||||
|
|
@ -1375,9 +1382,9 @@ label > textarea {
|
|||
}
|
||||
|
||||
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
|
||||
--color: var(--color);
|
||||
border: none;
|
||||
background: none;
|
||||
--color: var(--color);
|
||||
}
|
||||
|
||||
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
|
||||
|
|
@ -1888,7 +1895,7 @@ progress::-moz-progress-bar {
|
|||
|
||||
progress:indeterminate {
|
||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
animation: progressIndeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
|
|
@ -1899,7 +1906,7 @@ progress:indeterminate::-moz-progress-bar {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
@keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
|
@ -1958,8 +1965,8 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
animation-duration: .2s;
|
||||
animation-name: slide;
|
||||
animation-duration: .2s;
|
||||
}
|
||||
|
||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||
|
|
@ -1968,12 +1975,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
@keyframes slide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1982,12 +1989,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
41
css/pico.css
41
css/pico.css
|
|
@ -214,13 +214,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
|
|
@ -298,13 +300,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -383,13 +387,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -933,7 +939,7 @@ a[role="button"] {
|
|||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -964,6 +970,7 @@ a[role="button"]:active,
|
|||
a[role="button"]:focus {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
button:focus,
|
||||
|
|
@ -971,7 +978,7 @@ input[type="submit"]:focus,
|
|||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
a[role="button"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
|
||||
input[type="reset"] {
|
||||
|
|
@ -987,7 +994,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
|
|||
}
|
||||
|
||||
input[type="reset"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
|
|
@ -1023,7 +1030,7 @@ input[type="submit"].secondary:focus,
|
|||
input[type="button"].secondary:focus,
|
||||
input[type="reset"].secondary:focus,
|
||||
a[role="button"].secondary:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button.contrast,
|
||||
|
|
@ -1058,7 +1065,7 @@ input[type="submit"].contrast:focus,
|
|||
input[type="button"].contrast:focus,
|
||||
input[type="reset"].contrast:focus,
|
||||
a[role="button"].contrast:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
|
||||
button.outline,
|
||||
|
|
@ -1298,7 +1305,7 @@ textarea:focus {
|
|||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
||||
|
|
@ -1570,9 +1577,9 @@ label > textarea {
|
|||
}
|
||||
|
||||
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
|
||||
--color: var(--color);
|
||||
border: none;
|
||||
background: none;
|
||||
--color: var(--color);
|
||||
}
|
||||
|
||||
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
|
||||
|
|
@ -2083,7 +2090,7 @@ progress::-moz-progress-bar {
|
|||
|
||||
progress:indeterminate {
|
||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
animation: progressIndeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
|
|
@ -2094,7 +2101,7 @@ progress:indeterminate::-moz-progress-bar {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
@keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
|
@ -2153,8 +2160,8 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
animation-duration: .2s;
|
||||
animation-name: slide;
|
||||
animation-duration: .2s;
|
||||
}
|
||||
|
||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||
|
|
@ -2163,12 +2170,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
@keyframes slide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2177,12 +2184,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -214,13 +214,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
|
|
@ -298,13 +300,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -383,13 +387,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -849,7 +855,7 @@ a[role="button"] {
|
|||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -880,6 +886,7 @@ a[role="button"]:active,
|
|||
a[role="button"]:focus {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
button:focus,
|
||||
|
|
@ -887,7 +894,7 @@ input[type="submit"]:focus,
|
|||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
a[role="button"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
|
||||
input[type="reset"] {
|
||||
|
|
@ -903,7 +910,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
|
|||
}
|
||||
|
||||
input[type="reset"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
|
|
@ -1069,7 +1076,7 @@ textarea:focus {
|
|||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
||||
|
|
@ -1341,9 +1348,9 @@ label > textarea {
|
|||
}
|
||||
|
||||
[type="file"]:hover, [type="file"]:active, [type="file"]:focus {
|
||||
--color: var(--color);
|
||||
border: none;
|
||||
background: none;
|
||||
--color: var(--color);
|
||||
}
|
||||
|
||||
[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button {
|
||||
|
|
@ -1854,7 +1861,7 @@ progress::-moz-progress-bar {
|
|||
|
||||
progress:indeterminate {
|
||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
animation: progressIndeterminate 1s linear infinite;
|
||||
}
|
||||
|
||||
progress:indeterminate[value]::-webkit-progress-value {
|
||||
|
|
@ -1865,7 +1872,7 @@ progress:indeterminate::-moz-progress-bar {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
@keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
|
@ -1924,8 +1931,8 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
animation-duration: .2s;
|
||||
animation-name: slide;
|
||||
animation-duration: .2s;
|
||||
}
|
||||
|
||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||
|
|
@ -1934,12 +1941,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
|
||||
@keyframes slide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1948,12 +1955,12 @@ progress:indeterminate::-moz-progress-bar {
|
|||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -157,13 +157,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
|
|
@ -241,13 +243,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -326,13 +330,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -875,7 +881,7 @@ a[role="button"] {
|
|||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -905,6 +911,7 @@ a[role="button"]:active,
|
|||
a[role="button"]:focus {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
button:focus,
|
||||
|
|
@ -912,7 +919,7 @@ input[type="submit"]:focus,
|
|||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
a[role="button"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
|
||||
input[type="reset"] {
|
||||
|
|
@ -928,7 +935,7 @@ input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus
|
|||
}
|
||||
|
||||
input[type="reset"]:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
|
|
@ -964,7 +971,7 @@ input[type="submit"].secondary:focus,
|
|||
input[type="button"].secondary:focus,
|
||||
input[type="reset"].secondary:focus,
|
||||
a[role="button"].secondary:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button.contrast,
|
||||
|
|
@ -999,7 +1006,7 @@ input[type="submit"].contrast:focus,
|
|||
input[type="button"].contrast:focus,
|
||||
input[type="reset"].contrast:focus,
|
||||
a[role="button"].contrast:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
|
||||
button.outline,
|
||||
|
|
@ -1238,7 +1245,7 @@ textarea:focus {
|
|||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
||||
|
|
|
|||
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -210,13 +210,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
|
|
@ -294,13 +296,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
@ -379,13 +383,15 @@ kbd {
|
|||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
|
|
|
|||
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue