bullframe.css 4.2.2 → 5.0.1

package/dist/css/bullframe-classless.css

@@ -1,5 +1,5 @@
-/*! bullframe.css v4.2.2 | MIT License | https://github.com/marcop135/bullframe.css */
-/*! custom build: bullframe-classless */
+/*! Bullframe CSS v5.0.0 | MIT License | https://github.com/marcop135/bullframe.css */
+@charset "UTF-8";
 *,
 *::before,
 *::after {
@@ -43,7 +43,6 @@ html {
 
 body {
   margin: 0;
-  font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.5;
   font-weight: 400;
@@ -61,12 +60,10 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  font-weight: 700;
   font-weight: 600;
   font-family: inherit;
   color: inherit;
   line-height: 1.25;
-  margin-bottom: 10px;
   margin-bottom: 1rem;
 }
 
@@ -97,7 +94,6 @@ h6 {
 }
 
 blockquote {
-  margin: 0 0 20px 0;
   margin-bottom: 2rem;
   padding-left: 0;
   font-style: italic;
@@ -112,7 +108,7 @@ blockquote small {
   display: block;
 }
 
-blockquote small:before {
+blockquote small::before {
   content: "— ";
 }
 
@@ -121,14 +117,14 @@ q {
 }
 
 pre {
-  margin: 0 0 20px 0;
   margin: 0 0 2rem 0;
   display: block;
   overflow: auto;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
-  hyphens: none;
+  -webkit-hyphens: none;
+          hyphens: none;
   -ms-overflow-style: auto;
 }
 
@@ -136,7 +132,7 @@ pre,
 code,
 kbd,
 samp {
-  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-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: 0.875em;
 }
 
@@ -155,7 +151,6 @@ pre code {
 }
 
 p {
-  margin: 0 0 20px 0;
   margin: 0 0 2rem 0;
 }
 
@@ -184,9 +179,9 @@ strong {
   font-weight: inherit;
 }
 
-/* stylelint-disable-next-line */
 b,
 strong {
+  /* stylelint-disable-next-line */
   font-weight: bolder;
 }
 
@@ -216,6 +211,10 @@ small {
   font-size: 80%;
 }
 
+p:has(small) {
+  line-height: 1.25;
+}
+
 hr {
   box-sizing: content-box;
   display: block;
@@ -223,24 +222,11 @@ hr {
   border-style: solid;
   border-width: 1px 0 0;
   color: inherit;
-  margin: 20px 0;
   margin: 2rem 0;
   padding: 0;
   overflow: visible;
 }
 
-address {
-  font-style: normal;
-  margin-bottom: 10px;
-  margin-bottom: 1rem;
-  line-height: inherit;
-}
-
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-
 a {
   color: #007bff;
   text-decoration: none;
@@ -251,20 +237,59 @@ a:hover, a:focus {
   color: #0056b3;
 }
 
-a:not([href]):not([tabindex]) {
+a:not([href], [tabindex]) {
   color: inherit;
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):hover,
-a:not([href]):not([tabindex]):focus,
-a:not([href]):not([class]),
-a:not([href]):not([class]):hover {
+a:not([href], [class]),
+a:not([href], [class]):hover {
   color: inherit;
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):focus {
+a:not([href], [tabindex]):focus {
+  outline: 0;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+a:focus,
+input:focus {
+  outline: 2px solid orange;
+}
+
+:focus-visible {
+  outline: 2px solid orange;
+}
+
+button:focus,
+[type=button]:focus,
+[type=reset]:focus,
+[type=submit]:focus,
+[type=email]:focus,
+[type=number]:focus,
+[type=password]:focus,
+[type=tel]:focus,
+[type=search]:focus,
+[type=text]:focus,
+[type=date]:focus,
+[type=datetime-local]:focus,
+[type=month]:focus,
+[type=time]:focus,
+[type=week]:focus,
+[type=url]:focus,
+[type=radio]:focus,
+[type=checkbox]:focus,
+input[list]:focus,
+select:focus,
+textarea:focus {
   outline: 0;
 }
 
@@ -272,7 +297,6 @@ menu,
 ol,
 ul,
 dl {
-  margin: 0 0 20px 0;
   margin: 0 0 2rem 0;
   padding: 0;
 }
@@ -289,7 +313,6 @@ dd {
 
 ul,
 ol {
-  margin-left: 20px;
   margin-left: 2rem;
 }
 
@@ -308,7 +331,7 @@ dd {
   margin-left: 0;
 }
 
-nav li:before {
+nav li::before {
   content: "​";
   position: absolute;
 }
@@ -409,6 +432,128 @@ iframe {
   border-style: none;
 }
 
+address {
+  font-style: normal;
+  margin-bottom: 10px;
+  margin-bottom: 1rem;
+  line-height: inherit;
+}
+
+details > summary:first-of-type {
+  display: list-item;
+}
+
+summary {
+  cursor: pointer;
+  font-weight: 700;
+  word-break: break-all;
+}
+
+dialog {
+  background-color: #fff;
+  color: #222;
+  border: none;
+  border-radius: 0.25rem;
+  padding: 20px;
+  padding: 2rem;
+  height: -moz-fit-content;
+  height: fit-content;
+  min-width: 25rem;
+  max-width: calc(100vw - 3rem);
+}
+@media (min-width: 768px) {
+  dialog {
+    max-width: 50rem;
+  }
+}
+
+dialog[open] {
+  display: block !important;
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+table {
+  caption-side: bottom;
+  max-width: 100%;
+  border-collapse: collapse;
+  border-color: currentcolor;
+  text-indent: 0;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+thead th {
+  vertical-align: bottom;
+}
+
+th,
+td {
+  vertical-align: top;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+  font-weight: 700;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #999;
+  text-align: left;
+  caption-side: bottom;
+  line-height: 1.375;
+  font-size: 90%;
+}
+
+/* Accessibility
+ * ========================================================================== */
+/**
+ * Change the cursor on busy elements in all browsers (opinionated).
+ */
+:where([aria-busy=true i]) {
+  cursor: progress;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers (opinionated).
+ */
+:where([aria-disabled=true i], [disabled]) {
+  cursor: not-allowed;
+}
+
+/*
+ * Change the display on visually hidden accessible elements
+ * in all browsers (opinionated).
+ */
+:where([aria-hidden=false i][hidden]) {
+  display: initial;
+}
+
+:where([aria-hidden=false i][hidden]:not(:focus)) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
 html input,
 button,
 select,
@@ -517,8 +662,7 @@ label textarea {
   font-size: 110%;
 }
 
-[type=number]::-webkit-outer-spin-button,
-[type=number]::-webkit-inner-spin-button {
+::-webkit-inner-spin-button {
   height: auto;
 }
 
@@ -537,7 +681,6 @@ label textarea {
 }
 
 [type=search] {
-  outline-offset: -2.5px;
   outline-offset: -0.25rem;
 }
 
@@ -554,7 +697,11 @@ select {
   word-wrap: normal;
 }
 
-[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+[list]:not([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time])::-webkit-calendar-picker-indicator {
   display: none !important;
 }
 
@@ -562,7 +709,6 @@ optgroup {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
-  font-weight: 700;
   font-weight: 600;
 }
 
@@ -587,18 +733,20 @@ html [type=button],
 input[list],
 textarea {
   -webkit-appearance: none;
+          appearance: none;
 }
 
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
+::file-selector-button {
   font: inherit;
+  -webkit-appearance: auto;
+     -moz-appearance: auto;
+          appearance: auto;
 }
 
 button,
 input,
 select,
 textarea {
-  border-radius: 2.5px;
   border-radius: 0.25rem;
 }
 
@@ -607,7 +755,6 @@ textarea {
 }
 
 [type=checkbox] {
-  border-radius: 5px;
   border-radius: 0.5rem;
 }
 
@@ -617,7 +764,7 @@ textarea {
   background-color: #fff;
 }
 
-[type=range] {
+[type=range i] {
   background-color: transparent;
 }
 
@@ -675,14 +822,10 @@ button:hover, button:active, button:focus,
   color: #222;
 }
 
-button,
-select,
-input[type=submit],
-input[type=button],
-[type=checkbox],
-[type=range],
-[type=radio],
-[role=button] {
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
   cursor: pointer;
 }
 
@@ -695,6 +838,13 @@ textarea::placeholder {
   color: #666;
 }
 
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+:-moz-focusring {
+  outline: auto;
+}
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
@@ -715,7 +865,7 @@ input[list],
 select,
 textarea {
   background-color: #fff;
-  border: 1px solid #999;
+  border: 1px solid/#999;
   padding: 5px 7.5px;
   padding: 0.5rem 0.75rem;
 }
@@ -794,32 +944,32 @@ button:active, button:focus,
 
 fieldset[disabled] button,
 fieldset[disabled] input,
-fieldset[disabled] input:after,
-fieldset[disabled] input:before,
+fieldset[disabled] input::after,
+fieldset[disabled] input::before,
 fieldset[disabled] input:checked,
 fieldset[disabled] select,
 fieldset[disabled] textarea,
 fieldset[disabled] label,
 button[disabled],
 input[disabled],
-input[disabled]:after,
-input[disabled]:before,
+input[disabled]::after,
+input[disabled]::before,
 input[disabled]:checked,
 select[disabled],
 textarea[disabled],
 label[disabled],
 button:disabled,
 input:disabled,
-input:disabled:after,
-input:disabled:before,
+input:disabled::after,
+input:disabled::before,
 input:disabled:checked,
 select:disabled,
 textarea:disabled,
 label:disabled,
 button[aria-disabled=true],
 input[aria-disabled=true],
-input[aria-disabled=true]:after,
-input[aria-disabled=true]:before,
+input[aria-disabled=true]::after,
+input[aria-disabled=true]::before,
 input[aria-disabled=true]:checked,
 select[aria-disabled=true],
 textarea[aria-disabled=true],
@@ -834,7 +984,7 @@ label[aria-disabled=true] {
   opacity: 0.5 !important;
 }
 
-select:not([size]):not([multiple]) {
+select:not([size], [multiple]) {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -847,8 +997,8 @@ select::-ms-expand {
   display: none;
 }
 
-*[dir=rtl] select:not([size]):not([multiple]),
-select[dir=rtl]:not([size]):not([multiple]) {
+*[dir=rtl] select:not([size], [multiple]),
+select[dir=rtl]:not([size], [multiple]) {
   background-position: left 0.85rem top 50%;
   padding-right: 7.5px;
   padding-right: 0.75rem;
@@ -856,181 +1006,145 @@ select[dir=rtl]:not([size]):not([multiple]) {
   padding-left: 2rem;
 }
 
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  [type=checkbox],
-  [type=radio] {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    height: 1.8rem;
-    width: 1.8rem;
-    vertical-align: top;
-    position: relative;
-    border: 1px solid #999;
-  }
-  [type=checkbox] + label,
-  [type=radio] + label {
-    line-height: 1.8rem;
-    vertical-align: top;
-    margin-left: 5px;
-    margin-left: 0.5rem;
-  }
-  *[dir=rtl] [type=checkbox] + label, [type=checkbox][dir=rtl] + label,
-  *[dir=rtl] [type=radio] + label,
-  [type=radio][dir=rtl] + label {
-    margin-left: 0;
-    margin-right: 5px;
-    margin-right: 0.5rem;
-  }
-  [type=checkbox]:after,
-  [type=radio]:after {
-    content: "";
-    display: block;
-    position: absolute;
-  }
-  [type=checkbox]:checked,
-  [type=radio]:checked {
-    background-color: #007bff;
-    border-color: #000;
-  }
-  [type=radio]:after {
-    width: 1.8rem;
-    height: 1.8rem;
-    left: -0.05rem;
-    top: -0.05rem;
-    border-radius: 50%;
-    background: #fff;
-    transform: scale(0.35);
-  }
-  [type=checkbox]:after {
-    width: 0.6rem;
-    height: 0.8rem;
-    border: 2px solid #fff;
-    border-top: 0;
-    border-left: 0;
-    left: 35%;
-    top: 20%;
-    transform: rotate(43deg);
-  }
+[type=checkbox],
+[type=radio] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 1.8rem;
+  width: 1.8rem;
+  vertical-align: top;
+  position: relative;
+  border: 1px solid/#999;
 }
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  [type=range] {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    width: 100%;
-    height: 1.4rem;
-  }
-  [type=range]::-webkit-slider-thumb {
-    border: 0;
-    -webkit-appearance: none;
-            appearance: none;
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-top: -0.25rem;
-    background-color: #007bff;
-    border-radius: 1.5rem;
-    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  [type=range]::-webkit-slider-thumb:active {
-    background-color: #007bff;
-  }
-  [type=range]::-moz-range-thumb {
-    border: 0;
-    -moz-appearance: none;
-         appearance: none;
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: #007bff;
-    border-radius: 1.5rem;
-    -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  [type=range]::-moz-range-thumb:active {
-    background-color: #007bff;
-  }
-  [type=range]::-webkit-slider-runnable-track {
-    color: transparent;
-    border-color: transparent;
-    width: 100%;
-    height: 0.65rem;
-    cursor: pointer;
-    background-color: #e9e9e9;
-  }
-  [type=range]::-moz-range-track {
-    color: transparent;
-    border-color: transparent;
-    width: 100%;
-    height: 0.65rem;
-    cursor: pointer;
-    background-color: #e9e9e9;
-  }
-  [type=range]:focus {
-    outline: none;
-  }
-  [type=range]:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-  [type=range]:focus::-moz-slider-thumb {
-    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-  [type=range]::-moz-focus-outer {
-    border: 0;
-  }
-  [type=range]:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
-  [type=range]:disabled {
-    pointer-events: none;
-  }
-  [type=range]:disabled::-webkit-slider-thumb {
-    background-color: #ccc;
-  }
-  [type=range]:disabled::-moz-slider-thumb {
-    background-color: #ccc;
-  }
+[type=checkbox] + label,
+[type=radio] + label {
+  line-height: 1.8rem;
+  vertical-align: top;
+  margin-left: 5px;
+  margin-left: 0.5rem;
 }
-table {
-  max-width: 100%;
-  border-collapse: collapse;
-  border-color: currentcolor;
-  text-indent: 0;
+*[dir=rtl] [type=checkbox] + label, [type=checkbox][dir=rtl] + label,
+*[dir=rtl] [type=radio] + label,
+[type=radio][dir=rtl] + label {
+  margin-left: 0;
+  margin-right: 5px;
+  margin-right: 0.5rem;
+}
+[type=checkbox]::after,
+[type=radio]::after {
+  content: "";
+  display: block;
+  position: absolute;
+}
+[type=checkbox]:checked,
+[type=radio]:checked {
+  background-color: #007bff;
+  border-color: #000;
 }
 
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
+[type=radio]::after {
+  width: 1.8rem;
+  height: 1.8rem;
+  left: -0.05rem;
+  top: -0.05rem;
+  border-radius: 50%;
+  background: #fff;
+  transform: scale(0.35);
 }
 
-thead th {
-  vertical-align: bottom;
+[type=checkbox]::after {
+  width: 0.6rem;
+  height: 0.8rem;
+  border: 2px solid/#fff;
+  border-top: 0;
+  border-left: 0;
+  left: 35%;
+  top: 20%;
+  transform: rotate(43deg);
 }
 
-th,
-td {
-  vertical-align: top;
+[type=range] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 100%;
+  height: 1.4rem;
 }
 
-th {
-  text-align: inherit;
-  font-weight: 700;
+[type=range]::-webkit-slider-thumb {
+  border: 0;
+  -webkit-appearance: none;
+          appearance: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: -0.25rem;
+  background-color: #007bff;
+  border-radius: 1.5rem;
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+[type=range]::-webkit-slider-thumb:active {
+  background-color: #007bff;
 }
 
-caption {
-  padding-top: 5px;
-  padding-top: 0.5rem;
-  padding-bottom: 5px;
-  padding-bottom: 0.5rem;
-  color: #999;
-  text-align: left;
-  caption-side: bottom;
-  line-height: 1.375;
-  font-size: 90%;
+[type=range]::-moz-range-thumb {
+  border: 0;
+  -moz-appearance: none;
+       appearance: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #007bff;
+  border-radius: 1.5rem;
+  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+[type=range]::-moz-range-thumb:active {
+  background-color: #007bff;
+}
+
+[type=range]::-webkit-slider-runnable-track {
+  color: transparent;
+  border-color: transparent;
+  width: 100%;
+  height: 0.65rem;
+  cursor: pointer;
+  background-color: #e9e9e9;
+}
+
+[type=range]::-moz-range-track {
+  color: transparent;
+  border-color: transparent;
+  width: 100%;
+  height: 0.65rem;
+  cursor: pointer;
+  background-color: #e9e9e9;
+}
+
+[type=range]:focus {
+  outline: none;
+}
+[type=range]:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 0.1rem/#fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+[type=range]:focus::-moz-slider-thumb {
+  box-shadow: 0 0 0 0.1rem/#fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+[type=range]::-moz-focus-outer {
+  border: 0;
+}
+
+[type=range]:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 0.1rem/#fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+[type=range]:disabled {
+  pointer-events: none;
+}
+[type=range]:disabled::-webkit-slider-thumb {
+  background-color: #ccc;
+}
+[type=range]:disabled::-moz-slider-thumb {
+  background-color: #ccc;
 }