Initial assets
This commit is contained in:
Jason Zimdars
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m0 12a1.5 1.5 0 0 0 1.5 1.5h8.75a.25.25 0 0 1 .25.25v8.75a1.5 1.5 0 0 0 3 0v-8.75a.25.25 0 0 1 .25-.25h8.75a1.5 1.5 0 0 0 0-3h-8.75a.25.25 0 0 1 -.25-.25v-8.75a1.5 1.5 0 0 0 -3 0v8.75a.25.25 0 0 1 -.25.25h-8.75a1.5 1.5 0 0 0 -1.5 1.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 312 B |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.864 9.5h-11.607a.25.25 0 0 1 -.174-.43l3.864-3.721a2.609 2.609 0 0 0 -.075-3.682 2.612 2.612 0 0 0 -3.68-.077l-9.792 9.699a1 1 0 0 0 -.008 1.411l9.625 9.724a2.66 2.66 0 0 0 3.755-3.757l-3.729-3.733a.25.25 0 0 1 .177-.427h11.673c1.556 0 2-1.675 2-2.51a2.28 2.28 0 0 0 -2.029-2.497z"/></svg>
|
||||
|
After Width: | Height: | Size: 362 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15H6L13 1V9H18L11 23V15Z" /></svg>
|
||||
|
After Width: | Height: | Size: 107 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6,16.5L3,19.44V11H6M11,14.66L9.43,13.32L8,14.64V7H11M16,13L13,16V3H16M18.81,12.81L17,11H22V16L20.21,14.21L13,21.36L9.53,18.34L5.75,22H3L9.47,15.66L13,18.64" /></svg>
|
||||
|
After Width: | Height: | Size: 235 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.146 5.4-2.792-2.8a.5.5 0 0 0-.708 0L7.854 14.4a.5.5 0 0 1-.708 0l-2.792-2.8a.5.5 0 0 0-.708 0L.854 14.4a.5.5 0 0 0 0 .707L7.146 21.4a.5.5 0 0 0 .708 0L23.146 6.1a.5.5 0 0 0 0-.7"/></svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>hourglass</title><path d="M20.5,22H19V18.5A7.01,7.01,0,0,0,14.6,12,7.011,7.011,0,0,0,19,5.5V2h1.5a1,1,0,0,0,0-2H3.5a1,1,0,0,0,0,2H5V5.5A7.011,7.011,0,0,0,9.4,12,7.01,7.01,0,0,0,5,18.5V22H3.5a1,1,0,0,0,0,2h17a1,1,0,0,0,0-2ZM8.19,6.92a1,1,0,0,1,.89-.544h5.84a1,1,0,0,1,.811,1.584,4.591,4.591,0,0,1-7.462,0A1,1,0,0,1,8.19,6.92ZM7.92,18.63l3.044-2.936a1.544,1.544,0,0,1,2.07,0l0,0,3.043,2.935a1.349,1.349,0,0,1,.269,1.6,1.461,1.461,0,0,1-1.3.771H8.957a1.46,1.46,0,0,1-1.3-.764A1.352,1.352,0,0,1,7.92,18.63Z"/></svg>
|
||||
|
After Width: | Height: | Size: 578 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 15V5H5V15H9C9 16.66 10.34 18 12 18C13.66 18 15 16.66 15 15H19M19 3C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.89 21 3 20.1 3 19L3 5C3 3.9 3.89 3 5 3H19M7 13V11H17V13H7M7 9V7H17V9H7Z" /></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.649 16.4a.5.5 0 0 0-.841.245L.394 23.01a.5.5 0 0 0 .134.462.51.51 0 0 0 .462.135l6.364-1.414a.5.5 0 0 0 .245-.842zM17.852 7.208l-10.96 10.96a.25.25 0 0 0 0 .354L8.66 20.29a.507.507 0 0 0 .707 0L19.974 9.683a.5.5 0 0 0 0-.707l-1.768-1.768a.25.25 0 0 0-.354 0M16.792 5.794l-1.768-1.767a.5.5 0 0 0-.707 0L3.71 14.633a.5.5 0 0 0 0 .707l1.768 1.768a.25.25 0 0 0 .354 0l10.96-10.96a.25.25 0 0 0 0-.354M22.449 1.552a4.005 4.005 0 0 0-5.658 0l-.707.707a.5.5 0 0 0 0 .707l4.95 4.949a.513.513 0 0 0 .707 0l.708-.707a4 4 0 0 0 0-5.656"/></svg>
|
||||
|
After Width: | Height: | Size: 604 B |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.421 9.763-1.266-.449.00000012.00000004c-.715005-.254175-1.08858-1.03985-.834406-1.75486.015863-.0446231.0340224-.0883962.0544056-.131144l.576-1.213.00000009-.0000002c.562362-1.18562.0571125-2.60264-1.12851-3.165-.644423-.305662-1.39207-.305662-2.03649.0000002l-1.213.577.00000003-.00000002c-.686103.325481-1.50615.0331379-1.83163-.652965-.0199623-.0420799-.0377737-.0851469-.0533652-.129034l-.45-1.265.00000005.00000014c-.440698-1.23601-1.79994-1.88074-3.03595-1.44005-.671828.239539-1.20051.768217-1.44005 1.44005l-.45 1.266v-.00000001c-.254689.715408-1.04111 1.08889-1.75652.834205-.0436977-.0155566-.0865803-.0333144-.128483-.0532053l-1.213-.577-.00000004-.00000002c-1.18562-.562362-2.60264-.0571125-3.165 1.12851-.305662.644423-.305662 1.39207.00000004 2.03649l.576 1.213.00000005.0000001c.326289.685719.0349133 1.50611-.650806 1.8324-.0421276.0200458-.0852481.0379345-.129194.0535967l-1.266.45-.00000004.00000001c-1.23574.439828-1.88095 1.79814-1.44112 3.03388.239375.672547.768575 1.20175 1.44112 1.44112l1.266.45-.00000004-.00000002c.714925.2544 1.08825 1.04019.833853 1.75512-.0157227.0441846-.0336974.0875352-.0538533.129882l-.576 1.213.00000006-.00000012c-.562362 1.18562-.0571127 2.60264 1.12851 3.165.644423.305662 1.39207.305662 2.03649.00000011l1.213-.576-.00000004.00000002c.6845-.32628 1.5039-.0358847 1.83018.648616.0205653.0431439.0388639.0873322.0548208.132384l.45 1.265-.00000012-.00000034c.440698 1.23601 1.79994 1.88074 3.03595 1.44005.671828-.239539 1.20051-.768217 1.44005-1.44004l.45-1.266.00000007-.00000021c.2544-.714925 1.04019-1.08825 1.75512-.833853.0441846.0157227.0875352.0336974.129882.0538534l1.213.576-.00000014-.00000007c1.18562.562362 2.60264.0571127 3.165-1.12851.305662-.644423.305662-1.39207.00000014-2.03649l-.576-1.213-.00000001-.00000001c-.326132-.685182-.035064-1.50501.650118-1.83115.0423464-.020156.085697-.0381306.129882-.0538533l1.266-.451-.00000016.00000006c1.23574-.439828 1.88095-1.79814 1.44112-3.03388-.239375-.672547-.768575-1.20175-1.44112-1.44112zm-10.421 7.022h-.00000027c-1.92881-.0279814-3.66412-1.17834-4.441-2.944l-.00000007-.00000017c-1.01279-2.45242.150189-5.26191 2.6-6.281l-.00000002.00000001c2.45232-.980726 5.23932.172946 6.281 2.6l.00000007.00000018c1.01279 2.45242-.150189 5.26191-2.6 6.281l-.00000033.00000014c-.583184.239869-1.20955.356971-1.84.344z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 934 914" xmlns="http://www.w3.org/2000/svg"><circle cx="485.2" cy="467.2" r="286.5"/><path d="m197.7 219.1c-.2-7.1 5.8-11.7 12.7-13.2 34-7.1 53.5 29.2 81.4 40 39.5 6.4 25.9-54 30.8-77.7 17.2-65.3 78.4 67.2 108.2 55.7 26.8-17.3 25.9-58.8 38.7-86.1 9.6-41.5 30.4-2.6 48.6 10.1 14.2 11.2 31.9 17.9 45.1 29.9 13 11.2 20 29.1 35.8 36.8 20.2 9.1 44.8 2.3 65.2 11.8 18.3 7.2 33.8 22.6 52.5 30.4 23 8.6 42.4 1.8 37.8 35.1 2.7 36.8 38.3 71.9 40.1 108.6-.2 21.1-30.1 21.7-22.4 36.3 22.1 32.5-7.7 51.1 21 93.3 7 43.2-91.2-7.2-14.3 78.2 13.2 13.7 22.3 28.2 4.5 40.2-18.7 18.4-19.5 18.4-45 13.8-15.5-1.2 1.8 16.5-4.6 22.7-21.1 8-6.7 22-14.6 34.9-6 3.2-14.7-2.6-21.1-4-17.2-6.2-11.5 17.5-15.3 25.7-4 7.3-15.6 1.5-22.2-.2-26.7-10.8-55.1-3.1-82.4-.2-14.2 1.1-26 2.2-30.2 18.3-8 20.8-7.5 87.5-41.5 68.5-15.3-7.2-29.8-51.7-45.3-26.4-2.8 3.9-6.4 9.3-11.2 5.9-20.7-27.6-17-71-54.3-25.6-29.6 29.4-32.5 2.5-48.8-20.5-18.9-17.1-48.4-20.5-61.6-44.6-18.5-27.6-35.8-54.6-60.2-77.9-10.5-10.8-60.9-17.2-34.7-35.6 42.5-23.5-50.6-14-19.6-30.8 33.5-11.7 12.7-23.2-10.3-28.1-6.2-1.9-22-3.3-22.7-8.2 2.9-11.2 13.8-26.5 22.6-35.7 38.3-20.1-7-33.5-23.6-48.2-4-4.4 4.8-2.9 5.5-5.8-7.4-11.8-11.8-10-.4-21.8 3.2-7.8-4.9-17.6-3.8-25.5 8.1-21 57.9-6.5 64.2-36.2-3.5-26.1-16.4-50.3 3.5-75 5.9-8.8 22.4-16.8 19.3-28.7-5.7-14.7-26.4-23.7-27.6-40.2z"/><path d="m573 256.7s29.6-24.9 55-64.4 40.3-158 88.1-127.9c44.4 28-27.7 97.3-60.3 143.3-32.6 45.9-14.3 85.7-14.3 85.7l-68.5-36.6z"/><path d="m606.4 674.7s-11.3 37-11.2 84c0 47 51.9 154.6-4.6 155.3-52.5.6-29.6-96.8-27.1-153.1s-34.5-79.7-34.5-79.7z"/><path d="m325.5 622.7s-34 16.1-71.9 44c-37.8 27.9-104.9 118.2-126.8 89.7-20.3-26.5 66.8-72.5 113.1-104.6s51.2-64.9 51.2-64.9l34.4 35.9z"/><path d="m225.7 388.5s-30.8-35.1-75.8-72.7c-45.1-37.5-169.2-98.3-146.9-126.5 20.8-26.1 104.8 63 157.6 109.3 52.9 46.2 90.4 46.9 90.4 46.9l-25.4 43z"/><path d="m327.7 593.7s-47.6 1.4-103.9 17.7c-56.3 16.2-170.6 104.9-187.6 48.8-15.8-52.2 107.7-62.8 175.9-79.7s85.8-61.9 85.8-61.9l29.9 75.1z"/><path d="m443.5 344.2s0-46.7-8.9-104.6c-9-57.9-62-185.6-26.7-192 32.9-5.9 37 116.5 46.2 186.2 9.2 69.6 36.9 95 36.9 95l-47.5 15.5z"/><path d="m433.2 340.9s-6.8-37-19.5-82.8c-12.8-45.8-56.9-146.5-40.8-151.7 15-4.8 34.8 92 49.3 147s31.6 74.9 31.6 74.9l-20.6 12.5z"/><path d="m496.8 298.1s10.8-45.7 13.6-104.2c2.8-58.6-29.9-194.6 12.9-193.4 39.8 1.1 16.5 121.7 11.2 191.8-5.3 70 21.3 100.6 21.3 100.6l-59.1 5.2z"/><path d="m647.8 525s22.1 41.1 57.6 87.8c35.4 46.7 142.8 133.8 114.7 156.2-26.1 20.8-88-84.9-129.1-141.8-41.2-56.9-77.6-66-77.6-66z"/><path d="m658.4 523s23.5 29.3 56.5 63.5 119.7 101.9 108 114.1c-10.9 11.4-74.3-64.4-113.3-105.9s-63.4-50.9-63.4-50.9z"/><path d="m622.8 591s12.2 45.3 37.6 98.2 118.8 157 80.6 176.3c-35.6 17.9-72.4-99.3-101.1-163.4-28.6-64.1-66.6-78.4-66.6-78.4l49.5-32.6z"/><path d="m613.7 441.6s43.3 17.5 100.4 30.7c57.1 13.3 195.4 11.6 188.1 46.8-6.8 32.7-121.9-9.1-189.9-26.6s-101.9-1.2-101.9-1.2l3.3-49.8z"/><path d="m666.2 496.5s38.4 27.1 91.7 51.5 191.7 44.8 174.6 84.1c-15.9 36.5-119.1-30.1-182.2-61.1-63-31-101.3-17.7-101.3-17.7l17.2-56.7z"/><path d="m57.2 500.1c-7.1-1.3-14.4-2-21.5-.7-13.9 2.4-27.3 11.4-31.7 25.2-5 15.2 2.5 30.2 12.9 41.7 7.5 8.5 16.3 16.5 27.6 16.6 19.9-.7 36.3-19.9 37.6-39 1.6-18.3-8.2-36.2-27.2-40.2-3.5-.8-7.2-1.2-10.8-1.5"/><path d="m796.1 362.9c5.4 21.4 22.7 41 44.2 46.3 16.7 4.5 33.7-3 43.2-17.2 24.3-38.2-3-125.5-53.2-116.5-8 1.5-15.8 5.8-21.4 11.6-18.2 19.3-19.3 51.3-12.8 75.6z"/><path d="m255.1 782.9c5.4 21.4 22.7 41 44.2 46.3 16.7 4.5 33.7-3 43.2-17.2 24.3-38.2-3-125.5-53.2-116.5-8 1.5-15.8 5.8-21.4 11.6-18.2 19.3-19.3 51.3-12.8 75.6z"/><path d="m771 224.4c-3.4-.5-6.8-1-10.2-1.1-23.8-1.1-36.1 23.5-16.7 36.4 9.4 6.3 22.2 2.4 26.7-7.7 5.2-11.6-.7-20.3-10.6-26.9"/><path d="m402 812.4c-3.4-.5-6.8-1-10.2-1.1-23.8-1.1-36.1 23.5-16.7 36.4 9.4 6.3 22.2 2.4 26.7-7.7 5.2-11.6-.7-20.3-10.6-26.9"/></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="Bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>temperature-thermometer-high</title><path d="M14,4.5a4.5,4.5,0,0,0-9,0v9.438a.248.248,0,0,1-.06.162A5.941,5.941,0,0,0,3.5,18a6,6,0,0,0,12,0,5.941,5.941,0,0,0-1.44-3.9.248.248,0,0,1-.06-.162ZM9.5,22a4,4,0,0,1-2.8-6.856A1,1,0,0,0,7,14.43V4.5a2.5,2.5,0,0,1,5,0v9.93a1,1,0,0,0,.3.714A4,4,0,0,1,9.5,22Z"/><path d="M10.611,16.337a.25.25,0,0,1-.111-.208V5a1,1,0,0,0-2,0V16.129a.25.25,0,0,1-.111.208,2,2,0,1,0,2.222,0Z"/><path d="M19.5,11.5H17a1,1,0,0,0,0,2h2.5a1,1,0,0,0,0-2Z"/><path d="M17,5.5h2.5a1,1,0,0,0,0-2H17a1,1,0,0,0,0,2Z"/><path d="M19.5,7.5H17a1,1,0,0,0,0,2h2.5a1,1,0,0,0,0-2Z"/></svg>
|
||||
|
After Width: | Height: | Size: 666 B |
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
||||
* listed below.
|
||||
*
|
||||
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
|
||||
* vendor/assets/stylesheets directory can be referenced here using a relative path.
|
||||
*
|
||||
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
||||
* compiled file so the styles you add here take precedence over styles defined in any other CSS
|
||||
* files in this directory. Styles in this file should be added after the last require_* statement.
|
||||
* It is generally better to create a new file per style scope.
|
||||
*
|
||||
*= require_tree .
|
||||
*= require_self
|
||||
*/
|
||||
@@ -0,0 +1,16 @@
|
||||
.avatar {
|
||||
--avatar-border-radius: 50%;
|
||||
|
||||
aspect-ratio: 1;
|
||||
block-size: var(--avatar-size, 2.65em);
|
||||
border-radius: var(--avatar-border-radius);
|
||||
display: grid;
|
||||
inline-size: var(--avatar-size, 2.65em);
|
||||
margin: 0;
|
||||
place-items: center;
|
||||
|
||||
> * {
|
||||
aspect-ratio: 1;
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
:root {
|
||||
--btn-size: 2.65em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--transition: 300ms ease;
|
||||
|
||||
align-items: center;
|
||||
background-color: var(--btn-background, var(--color-bg));
|
||||
border-radius: var(--btn-border-radius, 2em);
|
||||
border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
|
||||
color: var(--btn-color, var(--color-ink));
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
gap: var(--btn-gap, 0.5em);
|
||||
justify-content: center;
|
||||
padding: var(--btn-padding, 0.5em 1.1em);
|
||||
pointer-events: auto;
|
||||
transition:
|
||||
background-color var( --transition),
|
||||
border var( --transition),
|
||||
color var( --transition),
|
||||
filter var( --transition),
|
||||
opacity var( --transition);
|
||||
|
||||
img {
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Default icon styles */
|
||||
&:where(:has(img, svg)) {
|
||||
text-align: start;
|
||||
|
||||
img, svg {
|
||||
block-size: var(--btn-icon-size, 1.3em);
|
||||
inline-size: var(--btn-icon-size, 1.3em);
|
||||
max-inline-size: unset;
|
||||
}
|
||||
|
||||
img:not([class]) {
|
||||
filter: invert(0);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Circle buttons */
|
||||
&.btn--circle,
|
||||
&:where(:has(.for-screen-reader):has(img, svg)) {
|
||||
--btn-border-radius: 50%;
|
||||
--btn-padding: 0;
|
||||
|
||||
aspect-ratio: 1;
|
||||
block-size: var(--btn-size);
|
||||
display: grid;
|
||||
inline-size: var(--btn-size);
|
||||
place-items: center;
|
||||
|
||||
> * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
|
||||
/* With radios and checkboxes */
|
||||
&:has(input[type=radio], input[type=checkbox]) {
|
||||
:is(input[type=radio], input[type=checkbox]) {
|
||||
appearance: none;
|
||||
block-size: calc(var(--btn-size) - var(--outline-size));
|
||||
border-radius: var(--btn-border-radius);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
inline-size: calc(var(--btn-size) - var(--outline-size));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img.checked {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:checked) {
|
||||
--btn-background: var(--color-ink);
|
||||
--btn-color: var(--color-ink-reversed);
|
||||
--outline-color: var(--color-ink);
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
img {
|
||||
filter: invert(0);
|
||||
}
|
||||
}
|
||||
|
||||
img.checked {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&:has([disabled]),
|
||||
[disabled] &[type=submit],
|
||||
&[type=submit]:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
.btn--link {
|
||||
--btn-background: var(--color-link);
|
||||
--btn-color: var(--color-ink-reversed);
|
||||
--outline-color: var(--color-link);
|
||||
}
|
||||
|
||||
.btn--negative {
|
||||
--btn-background: var(--color-negative);
|
||||
--btn-color: var(--color-ink-reversed);
|
||||
--outline-color: var(--color-negative);
|
||||
}
|
||||
|
||||
.btn--placeholder {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.btn--plain {
|
||||
--btn-border-radius: 0.5em;
|
||||
--btn-border-size: 0;
|
||||
--btn-icon-size: 100%;
|
||||
--btn-padding: 0;
|
||||
--hover-size: 0;
|
||||
}
|
||||
|
||||
.btn--positive {
|
||||
--btn-background: var(--color-positive);
|
||||
--btn-color: var(--color-ink-reversed);
|
||||
--outline-color: var(--color-positive);
|
||||
}
|
||||
|
||||
.btn--reversed {
|
||||
--btn-background: var(--color-ink);
|
||||
--btn-color: var(--color-bg);
|
||||
--outline-color: var(--color-ink);
|
||||
}
|
||||
|
||||
:is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
|
||||
--btn-border-color: var(--color-bg);
|
||||
|
||||
img:not([class]) {
|
||||
filter: invert(1);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.btn--success {
|
||||
animation: success 1s ease-out;
|
||||
|
||||
img {
|
||||
animation: zoom-fade 300ms ease-out;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
:root {
|
||||
/* Named color values */
|
||||
--lch-black: 0% 0 0;
|
||||
--lch-white: 100% 0 0;
|
||||
--lch-gray-light: 96% 0.005 96;
|
||||
--lch-gray: 92% 0.005 96;
|
||||
--lch-gray-dark: 75% 0.005 96;
|
||||
--lch-blue: 54% 0.15 255;
|
||||
--lch-blue-light: 95% 0.03 255;
|
||||
--lch-blue-dark: 80% 0.08 255;
|
||||
--lch-orange: 70% 0.2 44;
|
||||
--lch-red: 51% 0.2 31;
|
||||
--lch-green: 65.59% 0.234 142.49;
|
||||
--lch-green-light: 95% 0.03 142.49;
|
||||
--lch-always-black: 0% 0 0;
|
||||
--lch-always-white: 100% 0 0;
|
||||
|
||||
/* Abstractions */
|
||||
--color-negative: oklch(var(--lch-red));
|
||||
--color-positive: oklch(var(--lch-green));
|
||||
--color-positive-light: oklch(var(--lch-green-light));
|
||||
--color-bg: oklch(var(--lch-white));
|
||||
--color-ink: oklch(var(--lch-black));
|
||||
--color-ink-reversed: oklch(var(--lch-white));
|
||||
--color-link: oklch(var(--lch-blue));
|
||||
--color-subtle-light: oklch(var(--lch-gray-light));
|
||||
--color-subtle: oklch(var(--lch-gray));
|
||||
--color-subtle-dark: oklch(var(--lch-gray-dark));
|
||||
--color-selected: oklch(var(--lch-blue-light));
|
||||
--color-selected-dark: oklch(var(--lch-blue-dark));
|
||||
--color-marker: oklch(var(--lch-orange));
|
||||
--color-always-black: oklch(var(--lch-always-black));
|
||||
--color-always-white: oklch(var(--lch-always-white));
|
||||
|
||||
/* Redefine named color values for dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--lch-black: 100% 0 0;
|
||||
--lch-white: 0% 0 0;
|
||||
--lch-gray-light: 25.2% 0 0;
|
||||
--lch-gray: 30.12% 0 0;
|
||||
--lch-gray-dark: 44.95% 0 0;
|
||||
--lch-blue: 72.25% 0.16 248;
|
||||
--lch-blue-light: 28.11% 0.053 248;
|
||||
--lch-blue-dark: 42.25% 0.07 248;
|
||||
--lch-red: 73.8% 0.184 29.18;
|
||||
--lch-green: 75% 0.21 141.89;
|
||||
--lch-green-light: 28.11% 0.02 142.49;
|
||||
}
|
||||
}
|
||||
|
||||
.colorize--white {
|
||||
filter: invert(1);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert(0);
|
||||
}
|
||||
}
|
||||
|
||||
.colorize--black {
|
||||
filter: invert(0);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
/* Text inputs */
|
||||
.input {
|
||||
accent-color: var(--input-accent-color, var(--color-ink));
|
||||
background-color: var(--input-background, transparent);
|
||||
border-radius: var(--input-border-radius, 0.5em);
|
||||
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
|
||||
color: var(--input-color, var(--color-ink));
|
||||
font-size: max(16px, 1em);
|
||||
inline-size: 100%;
|
||||
line-height: 1.2;
|
||||
max-inline-size: 100%;
|
||||
padding: var(--input-padding, 0.5em 0.8em);
|
||||
resize: none;
|
||||
|
||||
&:autofill,
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: var(--color-ink);
|
||||
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
||||
}
|
||||
|
||||
&:where(:not(:active)):focus {
|
||||
--input-border-color: var(--color-selected-dark);
|
||||
--hover-color: var(--color-selected-dark);
|
||||
--outline-size: 0;
|
||||
--outline-color: transparent;
|
||||
|
||||
filter: var(--hover-filter);
|
||||
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input--file {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
inline-size: auto;
|
||||
place-items: center;
|
||||
|
||||
> * {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
--input-border-color: transparent;
|
||||
--input-border-radius: 8px;
|
||||
|
||||
block-size: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 0;
|
||||
inline-size: 100%;
|
||||
overflow: clip;
|
||||
|
||||
&::file-selector-button {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
--input-border-color: var(--color-selected-dark);
|
||||
--input-border-radius: 8px;
|
||||
--input-border-size: 0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input--textara {
|
||||
--input-padding: 0.5em;
|
||||
|
||||
line-height: 1.1;
|
||||
min-block-size: calc(4lh + (2 * var(--input-padding)));
|
||||
min-inline-size: 100%;
|
||||
padding-block: var(--input-padding);
|
||||
padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));
|
||||
|
||||
@supports (field-sizing: content) {
|
||||
field-sizing: content;
|
||||
max-block-size: calc(10lh + (2 * var(--input-padding)));
|
||||
min-block-size: calc(1lh + (2 * var(--input-padding)));
|
||||
}
|
||||
}
|
||||
|
||||
/* Switches */
|
||||
.switch {
|
||||
block-size: 1.75em;
|
||||
border-radius: 2em;
|
||||
display: inline-flex;
|
||||
inline-size: 3em;
|
||||
position: relative;
|
||||
|
||||
&:has(:focus-visible) {
|
||||
.switch__btn {
|
||||
box-shadow:
|
||||
0 0 0 var(--outline-size) var(--color-bg),
|
||||
0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch__input {
|
||||
block-size: 0;
|
||||
inline-size: 0;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.switch__btn {
|
||||
background-color: var(--color-subtle-dark);
|
||||
border-radius: 2em;
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
transition: 150ms ease;
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-ink-reversed);
|
||||
block-size: 1.35em;
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
inline-size: 1.35em;
|
||||
inset-block-end: 0.2em;
|
||||
inset-inline-start: 0.2em;
|
||||
position: absolute;
|
||||
transition: 150ms ease;
|
||||
}
|
||||
|
||||
.switch__input:disabled + & {
|
||||
background-color: var(--color-subtle-dark) !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.switch__input:checked + & {
|
||||
background-color: var(--color-link);
|
||||
|
||||
&::before {
|
||||
transform: translateX(1.2em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Containers that act like (and contain) inputs */
|
||||
.input--actor {
|
||||
transition: box-shadow 150ms ease, outline-offset 150ms ease;
|
||||
|
||||
&:focus-within {
|
||||
--input-border-color: var(--color-selected-dark);
|
||||
--hover-color: var(--color-selected-dark);
|
||||
--outline-size: 0;
|
||||
|
||||
filter: var(--hover-filter);
|
||||
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
|
||||
}
|
||||
|
||||
.input {
|
||||
--input-padding: 0;
|
||||
--input-border-radius: 0;
|
||||
--input-background: transparent;
|
||||
--input-border-size: 0;
|
||||
--hover-size: 0;
|
||||
--outline-size: 0;
|
||||
--outline-color: transparent;
|
||||
|
||||
inline-size: 100%;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:has(.input:is(
|
||||
:autofill,
|
||||
:-webkit-autofill,
|
||||
:-webkit-autofill:hover,
|
||||
:-webkit-autofill:focus)) {
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
-webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto var(--block-space);
|
||||
}
|
||||
|
||||
:where(#main) {
|
||||
container-type: inline-size;
|
||||
font-size: var(--font-medium-responsive);
|
||||
/* inline-size: 67ch; */
|
||||
inline-size: 90vw;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 100vw;
|
||||
padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3));
|
||||
padding-inline: clamp(var(--inline-space), 5%, calc(var(--inline-space) * 3));
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 70ch) {
|
||||
padding-inline: var(--inline-space);
|
||||
}
|
||||
|
||||
@media print {
|
||||
font-size: 11pt;
|
||||
inline-size: unset;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
orphans: 3;
|
||||
padding: 0;
|
||||
text-align: justify;
|
||||
text-justify: distribute;
|
||||
widows: 2;
|
||||
}
|
||||
}
|
||||
|
||||
:where(#footer) {
|
||||
max-inline-size: 100vw;
|
||||
view-transition-name: footer;
|
||||
|
||||
> nav {
|
||||
padding-inline: var(--inline-space);
|
||||
view-transition-name: footer-nav;
|
||||
}
|
||||
|
||||
&:has(.new-book-btn) {
|
||||
inset-block-end: 0;
|
||||
pointer-events: none;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
:where(#header) {
|
||||
max-inline-size: 100vw;
|
||||
view-transition-name: header;
|
||||
|
||||
> nav {
|
||||
view-transition-name: nav;
|
||||
}
|
||||
|
||||
> * {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 1ch;
|
||||
justify-content: center;
|
||||
padding: var(--block-space-half) var(--inline-space);
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:where(#toolbar) {
|
||||
display: flex;
|
||||
inset: 0 0 auto;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding-inline: var(--inline-space);
|
||||
position: sticky;
|
||||
view-transition-name: toolbar;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:is(#header, #footer, #toolbar) {
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.panel {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--panel-border-color, var(--color-subtle));
|
||||
color: var(--color-ink);
|
||||
border-radius: var(--panel-border-radius, 1em);
|
||||
inline-size: var(--panel-size, 60ch);
|
||||
max-inline-size: 100%;
|
||||
padding: calc(var(--block-space) * 2);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--panel-border-color: var(--color-subtle-dark);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
.windshield {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.splat {
|
||||
--hover-size: 0;
|
||||
--splat-color: red;
|
||||
--splat-rotate: 20deg;
|
||||
--splat-size: 30vw;
|
||||
|
||||
aspect-ratio: 1;
|
||||
block-size: var(--splat-size);
|
||||
color: var(--color-ink-reversed);
|
||||
container-type: inline-size;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
|
||||
.splat__date {
|
||||
aspect-ratio: 1;
|
||||
background-color: var(--splat-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
font-size: 5cqi;
|
||||
font-weight: 800;
|
||||
inset: 10cqi 5cqi auto auto;
|
||||
padding: 0.5em 1em;
|
||||
place-items: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.splat__link {
|
||||
color: var(--color-ink-reversed);
|
||||
}
|
||||
|
||||
.splat__svg {
|
||||
fill: var(--splat-color);
|
||||
position: absolute;
|
||||
scale: 120%;
|
||||
transform: rotate(var(--splat-rotate));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.splat__tag {
|
||||
aspect-ratio: 1;
|
||||
background-color: var(--splat-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
font-size: 5cqi;
|
||||
font-weight: 800;
|
||||
inset: auto auto 3cqi 3cqi;
|
||||
padding: 0.5em 1em;
|
||||
place-items: center;
|
||||
position: absolute;
|
||||
|
||||
+ & {
|
||||
inset: auto auto 0 24cqi;
|
||||
}
|
||||
}
|
||||
|
||||
.splat__title {
|
||||
font-size: 10cqi;
|
||||
line-height: 1.2;
|
||||
margin: 12cqi 14cqi;
|
||||
|
||||
-webkit-line-clamp: var(--lines, 3);
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.splats-list {
|
||||
--hover-size: 0;
|
||||
|
||||
a {
|
||||
color: var(--color-txt);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
border-radius: 0.6em;
|
||||
list-style: none;
|
||||
padding: 0.5em 1em;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.splats-filter {
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
:root {
|
||||
--inline-space: 1ch;
|
||||
--inline-space-half: calc(var(--inline-space) / 2);
|
||||
--inline-space-double: calc(var(--inline-space) * 2);
|
||||
|
||||
--block-space: 1rem;
|
||||
--block-space-half: calc(var(--block-space) / 2);
|
||||
--block-space-double: calc(var(--block-space) * 2);
|
||||
|
||||
--font-small-responsive: clamp(0.8rem, 2cqi, 1rem);
|
||||
--font-medium-responsive: clamp(1rem, 2.5cqi, 1.4rem);
|
||||
--font-large-responsive: clamp(1.3rem, 4cqi, 1.8rem);
|
||||
--font-x-large-responsive: clamp(1.8rem, 5cqi, 3.2rem);
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.txt-small { font-size: 0.8rem; }
|
||||
.txt-medium { font-size: 1rem; }
|
||||
.txt-large { font-size: 1.4rem; }
|
||||
.txt-x-large { font-size: 1.8rem; }
|
||||
.txt-xx-large { font-size: 2.4rem; }
|
||||
|
||||
.txt-small--responsive { font-size: var(--font-small-responsive); }
|
||||
.txt-medium--responsive { font-size: var(--font-medium-responsive); }
|
||||
.txt-large--responsive { font-size: var(--font-large-responsive); }
|
||||
.txt-x-large--responsive { font-size: var(--font-x-large-responsive); }
|
||||
|
||||
.txt-align-center { text-align: center; }
|
||||
.txt-align-start { text-align: start; }
|
||||
.txt-align-end { text-align: end; }
|
||||
|
||||
.txt-ink { color: var(--color-ink); }
|
||||
.txt-reversed { color: var(--color-ink-reversed); }
|
||||
.txt-negative { color: var(--color-negative); }
|
||||
.txt-subtle { color: var(--color-subtle-dark); }
|
||||
.txt-undecorated { text-decoration: none; }
|
||||
.txt-tight-lines { line-height: 1.2; }
|
||||
.txt-normal { font-weight: 400; font-style: normal; }
|
||||
.txt-nowrap { white-space: nowrap; }
|
||||
.txt-uppercase { text-transform: uppercase; }
|
||||
|
||||
/* Flexbox and Grid */
|
||||
.justify-end { justify-content: end; }
|
||||
.justify-start { justify-content: start; }
|
||||
.justify-center { justify-content: center; }
|
||||
.justify-space-between { justify-content: space-between; }
|
||||
|
||||
.align-center { align-items: center; }
|
||||
.align-start { align-items: start; }
|
||||
.align-end { align-items: end; }
|
||||
|
||||
.align-self-start { align-self: start; }
|
||||
|
||||
.contain { contain: inline-size; }
|
||||
|
||||
.flex { display: flex; }
|
||||
.flex-inline { display: inline-flex; }
|
||||
.flex-column { flex-direction: column; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
|
||||
.flex-item-grow { flex-grow: 1; }
|
||||
.flex-item-shrink { flex-shrink: 1; }
|
||||
.flex-item-no-shrink { flex-shrink: 0; }
|
||||
.flex-item-justify-start { margin-inline-end: auto; }
|
||||
.flex-item-justify-end { margin-inline-start: auto; }
|
||||
|
||||
.gap {
|
||||
column-gap: var(--column-gap, var(--inline-space));
|
||||
row-gap: var(--row-gap, var(--block-space));
|
||||
}
|
||||
|
||||
.gap-half {
|
||||
column-gap: var(--inline-space-half);
|
||||
row-gap: var(--block-space-half);
|
||||
}
|
||||
|
||||
/* Sizing */
|
||||
.full-width { inline-size: 100%; }
|
||||
.min-width { min-inline-size: 0; }
|
||||
.half-width { inline-size: 50%; }
|
||||
.max-width { max-inline-size: 100%; }
|
||||
.min-content { inline-size: min-content; }
|
||||
.max-inline-size { max-inline-size: 100%; }
|
||||
|
||||
/* Overflow */
|
||||
.overflow-x { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
|
||||
.overflow-y { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
|
||||
.overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
|
||||
.overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
|
||||
|
||||
.overflow-hide-scrollbar::-webkit-scrollbar {
|
||||
@media (pointer: course) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-line-clamp {
|
||||
-webkit-line-clamp: var(--lines, 2);
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
.pad { padding: var(--block-space) var(--inline-space); }
|
||||
.pad-double { padding: var(--block-space-double) var(--inline-space-double); }
|
||||
|
||||
.pad-block { padding-block: var(--block-space); }
|
||||
.pad-block-start { padding-block-start: var(--block-space); }
|
||||
.pad-block-end { padding-block-end: var(--block-space); }
|
||||
.pad-block-half { padding-block: var(--block-space-half); }
|
||||
.pad-block-start-half { padding-block-start: var(--block-space-half); }
|
||||
|
||||
.pad-inline { padding-inline: var(--inline-space); }
|
||||
.pad-inline-start { padding-inline-start: var(--inline-space); }
|
||||
.pad-inline-end { padding-inline-end: var(--inline-space); }
|
||||
.pad-inline-half { padding-inline: var(--inline-space-half); }
|
||||
.pad-inline-double { padding-inline: var(--inline-space-double); }
|
||||
|
||||
.unpad { padding: 0; }
|
||||
|
||||
/* Margins */
|
||||
.margin { margin: var(--block-space) var(--inline-space); }
|
||||
.margin-block { margin-block: var(--block-space); }
|
||||
.margin-block-half { margin-block: var(--block-space-half); }
|
||||
.margin-block-start { margin-block-start: var(--block-space); }
|
||||
.margin-block-start-half { margin-block-start: var(--block-space-half); }
|
||||
.margin-block-end { margin-block-end: var(--block-space); }
|
||||
.margin-block-end-half { margin-block-end: var(--block-space-half); }
|
||||
.margin-block-double { margin-block: var(--block-space-double); }
|
||||
.margin-block-end-double { margin-block-end: var(--block-space-double); }
|
||||
.margin-block-start-double { margin-block-start: var(--block-space-double); }
|
||||
|
||||
.margin-inline { margin-inline: var(--inline-space); }
|
||||
.margin-inline-start { margin-inline-start: var(--inline-space); }
|
||||
.margin-inline-start-half { margin-inline-start: var(--inline-space-half); }
|
||||
.margin-inline-end { margin-inline-end: var(--inline-space); }
|
||||
.margin-inline-end-half { margin-inline-end: var(--inline-space-half); }
|
||||
.margin-inline-half { margin-inline: var(--inline-space-half); }
|
||||
.margin-inline-double { margin-inline: var(--inline-space-double); }
|
||||
|
||||
.margin-none { margin: 0; }
|
||||
.margin-none-block { margin-block: 0; }
|
||||
.margin-none-block-start { margin-block-start: 0; }
|
||||
.margin-none-block-end { margin-block-end: 0; }
|
||||
|
||||
.margin-none-inline { margin-inline: 0; }
|
||||
.margin-none-inline-start { margin-inline-start: 0; }
|
||||
.margin-none-inline-end { margin-inline-end: 0; }
|
||||
|
||||
.center { margin-inline: auto; }
|
||||
.center-block { margin-block: auto; }
|
||||
|
||||
/* Position */
|
||||
.position-relative { position: relative; }
|
||||
.position-sticky { position: sticky; }
|
||||
|
||||
/* Fills */
|
||||
.fill { background-color: var(--color-bg); }
|
||||
.fill-black { background-color: var(--color-ink); }
|
||||
.fill-white { background-color: var(--color-ink-reversed); }
|
||||
.fill-shade { background-color: var(--color-subtle-light); }
|
||||
.fill-selected { background-color: var(--color-selected); }
|
||||
.fill-transparent { background-color: transparent; }
|
||||
|
||||
.translucent { opacity: var(--opacity, 0.5); }
|
||||
|
||||
/* Borders */
|
||||
.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-subtle)); }
|
||||
.border-top { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-subtle)); }
|
||||
.borderless { border: 0; }
|
||||
|
||||
/* Border radius */
|
||||
.border-radius { border-radius: var(--border-radius, 1em); }
|
||||
|
||||
/* Shadows */
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 0 0 1px oklch(var(--lch-always-black) / 0.02),
|
||||
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
|
||||
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
|
||||
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
|
||||
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
|
||||
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
box-shadow:
|
||||
0 0 0 1px oklch(var(--lch-always-black) / 0.42),
|
||||
0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
|
||||
0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
|
||||
0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
|
||||
0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
|
||||
0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Seperators */
|
||||
.separator {
|
||||
border-inline-start: 1px solid var(--color-subtle-dark);
|
||||
display: inline-flex;
|
||||
inline-size: 0;
|
||||
}
|
||||
|
||||
/* Spinners */
|
||||
.spinner {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
--mask: no-repeat radial-gradient(#000 68%, #0000 71%);
|
||||
--dot-size: 1.25em;
|
||||
|
||||
-webkit-mask: var(--mask), var(--mask), var(--mask);
|
||||
-webkit-mask-size: 28% 45%;
|
||||
animation: submitting 1.3s infinite linear;
|
||||
aspect-ratio: 8/5;
|
||||
background: currentColor;
|
||||
content: "";
|
||||
inline-size: var(--dot-size);
|
||||
inset: 50% 0.25em;
|
||||
margin-block: calc((var(--dot-size) / 3) * -1);
|
||||
margin-inline: calc((var(--dot-size) / 2) * -1);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.for-screen-reader {
|
||||
block-size: 1px;
|
||||
clip-path: inset(50%);
|
||||
inline-size: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Visibility */
|
||||
[hidden] { display: none; }
|
||||
[contents] { display: contents; }
|
||||
Reference in New Issue
Block a user