mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 02:16:15 -04:00
Lucas
parent
d0730c8b6e
commit
a2404b19b5
27 changed files with 1141 additions and 185 deletions
|
|
@ -155,16 +155,26 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-moz-tab-size: 4;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -320,15 +330,19 @@ sup {
|
|||
top: -0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg,
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
|
|
@ -509,6 +523,46 @@ del {
|
|||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -519,9 +573,14 @@ textarea {
|
|||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Change the inconsistent appearance in all browsers (opinionated).
|
||||
* 2. Add typography inheritance in all browsers (opinionated).
|
||||
*/
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -539,7 +598,10 @@ legend {
|
|||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
resize: block;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
|
|
@ -547,7 +609,8 @@ textarea {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button {
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -565,6 +628,29 @@ textarea {
|
|||
font: inherit;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -603,9 +689,11 @@ textarea {
|
|||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
input::placeholder, input::-webkit-input-placeholder,
|
||||
select::placeholder,
|
||||
textarea::placeholder {
|
||||
select::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -664,8 +752,8 @@ select::-ms-expand {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
select:not([multiple]) {
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
select:not([multiple]):not([size]) {
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -808,8 +896,8 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
a[role="button"] {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
|
|
@ -855,7 +943,10 @@ a[role="button"][disabled] {
|
|||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -863,9 +954,9 @@ td {
|
|||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -890,10 +981,15 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
|
|
@ -901,7 +997,7 @@ kbd {
|
|||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -985,6 +1081,43 @@ kbd {
|
|||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Miscs
|
||||
*/
|
||||
|
|
@ -997,6 +1130,7 @@ hr {
|
|||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -1005,6 +1139,32 @@ template {
|
|||
display: none;
|
||||
}
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: -moz-fit-content;
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border: solid;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
dialog:not([open]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
||||
|
|
@ -1017,9 +1177,9 @@ details {
|
|||
}
|
||||
|
||||
details summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
details summary::-webkit-details-marker {
|
||||
|
|
@ -1040,7 +1200,7 @@ details summary::after {
|
|||
height: 1rem;
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -1246,6 +1406,7 @@ nav {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav ol,
|
||||
nav ul {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -1253,10 +1414,12 @@ nav ul {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
nav ol:first-of-type,
|
||||
nav ul:first-of-type {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
nav ol:last-of-type,
|
||||
nav ul:last-of-type {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
|
@ -1284,6 +1447,7 @@ nav a:hover, nav a:active, nav a:focus {
|
|||
}
|
||||
|
||||
aside nav,
|
||||
aside ol,
|
||||
aside ul,
|
||||
aside li {
|
||||
display: block;
|
||||
|
|
@ -1349,3 +1513,20 @@ aside li a {
|
|||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
background-attachment: initial;
|
||||
animation-duration: 1ms;
|
||||
animation-delay: -1ms;
|
||||
animation-iteration-count: 1;
|
||||
scroll-behavior: auto;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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
225
css/pico.css
225
css/pico.css
|
|
@ -155,16 +155,26 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-moz-tab-size: 4;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -259,9 +269,9 @@ body > footer {
|
|||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 510px;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
max-width: 510px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -376,15 +386,19 @@ sup {
|
|||
top: -0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg,
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
|
|
@ -592,6 +606,46 @@ del {
|
|||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -602,9 +656,14 @@ textarea {
|
|||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Change the inconsistent appearance in all browsers (opinionated).
|
||||
* 2. Add typography inheritance in all browsers (opinionated).
|
||||
*/
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -622,7 +681,10 @@ legend {
|
|||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
resize: block;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
|
|
@ -630,7 +692,8 @@ textarea {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button {
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -648,6 +711,29 @@ textarea {
|
|||
font: inherit;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -686,9 +772,11 @@ textarea {
|
|||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
input::placeholder, input::-webkit-input-placeholder,
|
||||
select::placeholder,
|
||||
textarea::placeholder {
|
||||
select::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -753,14 +841,14 @@ input:not([type="checkbox"]):not([type="radio"]).valid,
|
|||
select.valid,
|
||||
textarea.valid {
|
||||
border-bottom: 1px solid var(--valid);
|
||||
background-image: 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='%23288a6a' 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");
|
||||
background-image: 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='rgba(40, 138, 106, 0.99)' 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");
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]).invalid,
|
||||
select.invalid,
|
||||
textarea.invalid {
|
||||
border-bottom: 1px solid var(--invalid);
|
||||
background-image: 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='%23b94646' 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");
|
||||
background-image: 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='rgba(185, 70, 70, 0.99)' 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");
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
|
|
@ -772,8 +860,8 @@ select::-ms-expand {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
select:not([multiple]) {
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
select:not([multiple]):not([size]) {
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -916,8 +1004,8 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
a[role="button"] {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
|
|
@ -1101,7 +1189,10 @@ a.outline.contrast[role="button"]:focus {
|
|||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -1109,9 +1200,9 @@ td {
|
|||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -1136,10 +1227,15 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
|
|
@ -1147,7 +1243,7 @@ kbd {
|
|||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -1231,6 +1327,43 @@ kbd {
|
|||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Miscs
|
||||
*/
|
||||
|
|
@ -1243,6 +1376,7 @@ hr {
|
|||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -1251,6 +1385,32 @@ template {
|
|||
display: none;
|
||||
}
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: -moz-fit-content;
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border: solid;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
dialog:not([open]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
||||
|
|
@ -1263,9 +1423,9 @@ details {
|
|||
}
|
||||
|
||||
details summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
details summary::-webkit-details-marker {
|
||||
|
|
@ -1286,7 +1446,7 @@ details summary::after {
|
|||
height: 1rem;
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -1492,6 +1652,7 @@ nav {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav ol,
|
||||
nav ul {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -1499,10 +1660,12 @@ nav ul {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
nav ol:first-of-type,
|
||||
nav ul:first-of-type {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
nav ol:last-of-type,
|
||||
nav ul:last-of-type {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
|
@ -1534,6 +1697,7 @@ nav a.contrast:not([role="button"]), nav a.contrast:not([role="button"]):hover,
|
|||
}
|
||||
|
||||
aside nav,
|
||||
aside ol,
|
||||
aside ul,
|
||||
aside li {
|
||||
display: block;
|
||||
|
|
@ -1599,3 +1763,20 @@ aside li a {
|
|||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
background-attachment: initial;
|
||||
animation-duration: 1ms;
|
||||
animation-delay: -1ms;
|
||||
animation-iteration-count: 1;
|
||||
scroll-behavior: auto;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,16 +155,26 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-moz-tab-size: 4;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -316,15 +326,19 @@ sup {
|
|||
top: -0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg,
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
|
|
@ -505,6 +519,46 @@ del {
|
|||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -515,9 +569,14 @@ textarea {
|
|||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Change the inconsistent appearance in all browsers (opinionated).
|
||||
* 2. Add typography inheritance in all browsers (opinionated).
|
||||
*/
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -535,7 +594,10 @@ legend {
|
|||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
resize: block;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
|
|
@ -543,7 +605,8 @@ textarea {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button {
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -561,6 +624,29 @@ textarea {
|
|||
font: inherit;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -599,9 +685,11 @@ textarea {
|
|||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
input::placeholder, input::-webkit-input-placeholder,
|
||||
select::placeholder,
|
||||
textarea::placeholder {
|
||||
select::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -660,8 +748,8 @@ select::-ms-expand {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
select:not([multiple]) {
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
select:not([multiple]):not([size]) {
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -804,8 +892,8 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
a[role="button"] {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
|
|
@ -851,7 +939,10 @@ a[role="button"][disabled] {
|
|||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -859,9 +950,9 @@ td {
|
|||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -886,10 +977,15 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
|
|
@ -897,7 +993,7 @@ kbd {
|
|||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -981,6 +1077,43 @@ kbd {
|
|||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Miscs
|
||||
*/
|
||||
|
|
@ -993,6 +1126,7 @@ hr {
|
|||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -1001,6 +1135,32 @@ template {
|
|||
display: none;
|
||||
}
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: -moz-fit-content;
|
||||
width: -webkit-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border: solid;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
dialog:not([open]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Accordion (<details>)
|
||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
||||
|
|
@ -1013,9 +1173,9 @@ details {
|
|||
}
|
||||
|
||||
details summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
details summary::-webkit-details-marker {
|
||||
|
|
@ -1036,7 +1196,7 @@ details summary::after {
|
|||
height: 1rem;
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -1242,6 +1402,7 @@ nav {
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav ol,
|
||||
nav ul {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -1249,10 +1410,12 @@ nav ul {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
nav ol:first-of-type,
|
||||
nav ul:first-of-type {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
nav ol:last-of-type,
|
||||
nav ul:last-of-type {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
|
@ -1280,6 +1443,7 @@ nav a:hover, nav a:active, nav a:focus {
|
|||
}
|
||||
|
||||
aside nav,
|
||||
aside ol,
|
||||
aside ul,
|
||||
aside li {
|
||||
display: block;
|
||||
|
|
@ -1345,3 +1509,20 @@ aside li a {
|
|||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
background-attachment: initial;
|
||||
animation-duration: 1ms;
|
||||
animation-delay: -1ms;
|
||||
animation-iteration-count: 1;
|
||||
scroll-behavior: auto;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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
|
|
@ -158,16 +158,26 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-moz-tab-size: 4;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -230,9 +240,9 @@ body > footer {
|
|||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 510px;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
max-width: 510px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -315,15 +325,19 @@ sup {
|
|||
top: -0.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg,
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
|
|
@ -530,6 +544,46 @@ del {
|
|||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
|
|
@ -540,9 +594,14 @@ textarea {
|
|||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Change the inconsistent appearance in all browsers (opinionated).
|
||||
* 2. Add typography inheritance in all browsers (opinionated).
|
||||
*/
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -560,7 +619,10 @@ legend {
|
|||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
resize: block;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
|
|
@ -568,7 +630,8 @@ textarea {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button {
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -586,6 +649,29 @@ textarea {
|
|||
font: inherit;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -623,9 +709,11 @@ textarea {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
input::placeholder, input::-webkit-input-placeholder,
|
||||
select::placeholder,
|
||||
textarea::placeholder {
|
||||
select::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -684,8 +772,8 @@ select::-ms-expand {
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
select:not([multiple]) {
|
||||
background-image: 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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
select:not([multiple]):not([size]) {
|
||||
background-image: 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='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -827,8 +915,8 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
a[role="button"] {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
|
|
@ -873,7 +961,10 @@ a[role="button"][disabled] {
|
|||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -881,9 +972,9 @@ td {
|
|||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -900,3 +991,40 @@ thead td {
|
|||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
}
|
||||
|
||||
/**
|
||||
* Accessibility & User interaction
|
||||
*/
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
|
|
|||
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
Loading…
Add table
Add a link
Reference in a new issue